Question

我正在尝试使用ng-repeat显示我的菜单。

HTML：

<ul class="dash-menu-list" ng-controller="jsonMenu">
<li ng-repeat="menu in menus" class="{{menu.class}}"> 
    <a href="#"> 
        <i class="{{menu.img}}"></i> 
        <span> {{menu.text}}</span> 
    </a>
    <div class="sub-menu">
        <ul>
            <li><a href="#">{{menu.sub_text}}</a></li>
            <li><a href="#">{{menu.subtext}}</a></li>
        </ul>
    </div>
</li>
</ul>

JS：

var menuApp = angular.module('menuApp', []);
menuApp.controller('jsonMenu', function($scope, $http) {
  $http.get('left_menu.json')
       .then(function(res){
          $scope.menus = res.data;                
        });
});

哪个工作正常，我想调整的是我不想要这个

<ul>
   <li><a href="#">{{menu.sub_text}}</a></li>
   <li><a href="#">{{menu.subtext}}</a></li>
</ul>

在第一次重复中添加。我怎样才能做到这一点？

更新：我的JSON文件的数据

[{"text":"DASHBOARD", "img":"dashboard-icon"},
 { "text":"EVENT MANAGER", "sub_text":"Servers", "subtext":"Process", "img":"current-icon", "class":"select"},
 { "text":"REPORT MANAGER", "sub_text":"Servers", "subtext":"Process", "img":"report-icon"},
 { "text":"EBPM MONITOR", "sub_text":"Servers", "subtext":"Process", "img":"ebpm-icon" },
  { "text":"FILE MANAGER", "sub_text":"Servers", "subtext":"Process", "img":"folder-icon" }]

Answer 1

我们可以在这里使用$ index。我们可以将$ index上的ng-show或ng-hide设置为0，这意味着ng-repeat的第一个元素。

<ul ng-hide="$index == 0">
   <li><a href="#">{{menu.sub_text}}</a></li>
   <li><a href="#">{{menu.subtext}}</a></li>
</ul>

如果您想从DOM中删除元素而不是通过ng-show或ng-hide隐藏它，请使用ng-if。

在每种情况下使用Ng-if并不是更好。 Ng-hide通常用于CSS，并且非常便宜且重量轻。 Ng-if另一方面，DOM操作是非常昂贵的。所以考虑到你的情况，Ng-hide / show会很有用而且重量很轻，因为你只有两个绑定。使用ng-if，只有在你有很多绑定的地方（我想20加上类似于ng-repeat循环的东西）。您需要根据情况平衡您的方法，一揽子方法会降低您的申请速度。

Answer 2

您可以将ng-if与$index一起使用。 ng-if优于ng-hide的优势在于它完全从DOM中删除了元素，而不是仅隐藏它们。

<ul ng-if="$index != 0">
   <li><a href="#">{{menu.sub_text}}</a></li>
   <li><a href="#">{{menu.subtext}}</a></li>
</ul>

Answer 3

<ul ng-hide="$first">
   <li><a href="#">{{menu.sub_text}}</a></li>
   <li><a href="#">{{menu.subtext}}</a></li>
</ul>

也可以。

Angular在适当的地方放置$ ng，$ last，$ even，$ odd和$ middle。

Angular JS条件ng-repeat

3 个答案: