根据结果​​使用ng-show / ng-hide显示消息或显示内容

Question

我有一个函数，我构建并返回这样的JSON：

{"message":"No se encontraron Grupos de MetaDetalles","entities":[],"breadcrumbs":[],"parent_id":0}

然后我在Angular中有一个视图如下：

<table id="example-datatables" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="span1"></th>
            <th><i class="icon-bookmark"></i> Nombre</th>
            <th><i class="icon-bookmark"></i> Padre</th>
            <th><i class="icon-bolt"></i> Descripción</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in MetaDetailGroup">
            <td class="span1">
                <div class="btn-group">
                    <a href="#/detailsgroup/edit/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Editar" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
                    <a href="#/detailsgroup/delete/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Eliminar" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
                </div>
            </td>
            <td><a href="javascript:void(0)">{% verbatim %}{{ item.name }}{% endverbatim %}</a></td>
            <td><a href="javascript:void(0)">{% verbatim %}{{ item.parent }}{% endverbatim %}</a></td>
            <td>{% verbatim %}{{ item.description }}{% endverbatim %}</td>
        </tr>
    </tbody>
</table>

我需要的是，如果entities有一个空数组，则不显示table#example-datatables而是显示message中存储在同一JSON中的错误消息，可能是ng-show/ng-hide是解决方案，但我不知道如何使用它，任何帮助或建议？

编辑1：代码停止工作

我有与以下相同的JSON回复：

{
   "message":"No se encontraron Grupos de MetaDetalles",
   "entities":[

   ],
   "breadcrumbs":[

   ],
   "parent_id":0
}

我的controller.js有以下代码：

app.controller('MetaDetailGroupList', ['$scope', '$http', '$location', '$routeParams', '$route', 'noty', function($scope, $http, $location, $routeParams, $route, $noty) {
        var id = "";

        if ($routeParams.id !== undefined) {
            id = '/' + $routeParams.id;
        }

        $http.get(Routing.generate('meta-detail-group-list') + id).success(function(data) {
            if (data.message) {
                $scope.message = data.message;
            } else {
                $scope.MetaDetailGroup = data;
                $scope.orderProp = 'name';
            }
        }).error(function(data, status, headers, config) {
            if (status == '500') {
                $scope.message = "No hay conexión con el servidor.";
            }
        });

        $scope.changeUrl = function(id) {
            $location.path('/detailsgroup/list' + '/' + id);
        }
}]);

在我的模板中，我有这个：

<div ng-show="MetaDetailGroup.entities.length === 0" class="alert">
    {% verbatim %}{{ message }}{% endverbatim %}
</div>

<div ng-hide="MetaDetailGroup.entities.length === 0">
    <ol class="breadcrumb"> 
        <li  ng-repeat="breadcrumb in MetaDetailGroup.breadcrumbs">
            <a href="javascript:void(0)" ng-click="recargaCategories(item_breadcrumbs.id)">{% verbatim %}{{ breadcrumb.name }} &#187; {% endverbatim %}</a>
        </li>
    </ol>
</div>

<a class="btn btn-success" href="#/detailsgroup/add" style="margin-bottom: 20px"><i class="icon-plus"></i> Agregar Grupo De Detalle</a>

<table id="example-datatables" class="table table-striped table-bordered table-hover" ng-hide="MetaDetailGroup.entities.length === 0">
    <thead>
        <tr>

            <th><i class="icon-bookmark"></i> Nombre</th>
            <th><i class="icon-bookmark"></i> Padre</th>
            <th><i class="icon-bolt"></i> Descripción</th>
            <th class="span1">Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in MetaDetailGroup.entities | orderBy:orderProp">
            <td><a href="javascript:void(0)" ng-click="changeUrl(item.id)">{% verbatim %}{{ item.name }}{% endverbatim %}</a></td>
            <td><a href="javascript:void(0)">{% verbatim %}{{ item.parent }}{% endverbatim %}</a></td>
            <td>{% verbatim %}{{ item.description }}{% endverbatim %}</td>
            <td class="span1">
                <div class="btn-group">
                    <a href="#/detailsgroup/edit/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Editar" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
                    <a ng-click="confirmDeleteMetaDetailGroup(item.id,item._token)" data-toggle="tooltip" title="Eliminar" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a> -->
                </div>
            </td>
        </tr>
    </tbody>
</table>

但由于某种原因，它不起作用，因为事情从未显示或隐藏，出了什么问题？

Answer 1

这是一个jsBin，显示我是如何使用ng-show和ng-hide

完成的

基本上：

<div ng-show="entities.length === 0">
  {{message}}
</div>

<table ng-hide="entities.length === 0" id="example-datatables" class="table table-striped table-bordered table-hover">
<thead>
    <tr>
        <th class="span1"></th>
        <th><i class="icon-bookmark"></i> Nombre</th>
        <th><i class="icon-bookmark"></i> Padre</th>
        <th><i class="icon-bolt"></i> Descripción</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in MetaDetailGroup">
        <td class="span1">
            <div class="btn-group">
                <a href="#/detailsgroup/edit/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Editar" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
                <a href="#/detailsgroup/delete/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Eliminar" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
            </div>
        </td>
        <td><a href="javascript:void(0)">{% verbatim %}{{ item.name }}{% endverbatim %}</a></td>
        <td><a href="javascript:void(0)">{% verbatim %}{{ item.parent }}{% endverbatim %}</a></td>
        <td>{% verbatim %}{{ item.description }}{% endverbatim %}</td>
    </tr>
</tbody>

Answer 2

仅在数组包含项目时才显示表格：

<table ng-show="MetaDetailGroup.entities.length" ...

然后你可以显示消息的div，如：

<div ng-hide="MetaDetailGroup.entities.length" ...

例如：http://jsfiddle.net/3Nhuk/