1

我有一个函数,可以在其中构建并返回这样的 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有一个空数组,那么不显示,而是显示存储在同一个 JSON 中table#example-datatables的错误消息,也许是解决方案,但我不知道如何使用它,有什么帮助或建议吗?messageng-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>

但是由于某种原因它不起作用,因为事情从不显示或隐藏,有什么问题?

4

2 回答 2

4

这是一个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>

于 2014-02-06T18:17:35.567 回答
2

仅当数组有项目时才显示表格,请使用:

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

然后,您可以为消息显示一个 div,例如:

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

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

于 2014-02-06T18:14:12.913 回答