Javascript 根据结果使用ng show/ng hide显示消息或显示内容_Javascript_Angularjs_Ng Show

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

javascript angularjs

Javascript 根据结果使用ng show/ng hide显示消息或显示内容,javascript,angularjs,ng-show,Javascript,Angularjs,Ng Show,我有一个函数，在其中我构建并返回一个JSON，如下所示： {"message":"No se encontraron Grupos de MetaDetalles","entities":[],"breadcrumbs":[],"parent_id":0} 然后我有一个角度视图，如下所示： <table id="example-datatables" class="table table-striped table-bordered table-hover"> <th

我有一个函数，在其中我构建并返回一个JSON，如下所示：

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

然后我有一个角度视图，如下所示：

<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>

{
   "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>


{%verbatim%}{{message}{%endverbatim%}


名义
教士
描述
疫苗
{%verbatim%}{{item.description}{%endverbatim%}
-->

但由于某种原因，它无法工作，因为事物从不显示或隐藏，这有什么不对？

仅当数组中有项时才显示表，请使用：

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

仅当数组中有项时才显示表，请使用：
<table ng-show="MetaDetailGroup.entities.length" ...

下面是一个演示我如何使用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>


{{message}}
名义
教士
描述
{%verbatim%}{{item.description}{%endverbatim%}


以下是我如何使用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>


{{message}}
名义
教士
描述
{%verbatim%}{{item.description}{%endverbatim%}


谢谢，只是为了改进答案应该是MetaDetailGroup.entities.length
谢谢，只是为了改进答案应该是MetaDetailGroup.entities.length
你能看看我的编辑吗？我找不到我的编解码器中的问题在哪里？你可以查看我的编辑吗？我找不到代码中的问题在哪里