使用NG-顯示/ NG隱藏顯示信息或顯示內容

Question

我有，我建立並返回一個像這樣的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> 

我需要的是，如果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/