Question

我有一个ng-repeat指令，我想在固定索引位置显示不同的对象值。

数据：

{
    "recipe": {
    "id":"0001",
    "name":"soup",
    "cat":[{"name":"dinner"}, {"name":"lunch"}, {"name":"breakfast"}]
}

我希望它显示为......

NG-重复：

1 :(显示cat.name：＆＃34;早餐＆＃34;）只应在索引0显示

2 :(不要显示包含＆＃34;早餐＆＃34;，＆＃34;晚餐和＃34;）的项目。

3 :(不要显示包含＆＃34;早餐＆＃34;的项目）（显示cat.name：   ＆＃34;晚餐＆＃34;） - 只显示＆＃34;晚餐＆＃34; at possition index 3

4 :(不要显示包含＆＃34;早餐＆＃34;，＆＃34;晚餐＆＃34;）的项目。

5 :(不要显示包含＆＃34;早餐＆＃34;，＆＃34;晚餐和＃34;）的项目。

等。

我该如何管理？

Answer 1

orderBy过滤器可以实现此目的，但您需要帮助它。

我会给每个猫项目一个displayOrder，因为它需要一些东西。

然后只是

<ul>
    <li ng-repeat="x in data.recipe.cat | orderBy:orderMeals">
        {{x.name}}
    </li>
</ul>

控制器执行类似

的操作

var app = angular.module('myapp', []);
app.controller('myCtrl', function($scope, $timeout) {
      $scope.data = {
        "recipe": {
          "id": "0001",
          "name": "soup",
          "cat": [{
            "name": "dinner", displayOrder: 2
          }, {
            "name": "lunch", displayOrder: 1
          }, {
            "name": "breakfast", displayOrder: 0
          }]
        }};

        $scope.orderMeals = function(item) {
          console.log('item', item);
          return item.displayOrder;
        }

});

注意我已将displayOrders添加到您的配方对象（see here）

中

Answer 2

试试这个

<script>
 var app = angular.module('myApp', []);
    app.controller('myCtrl', ['$scope', function($scope) {

     $scope.json = {
      "recipe": {
      "id":"0001",
      "name":"soup",
      "cat":[{"name":"dinner"}, {"name":"lunch"}, {"name":"breakfast"}]
      }
     };
     $scope.json.recipe.cat.reverse();
    }]);

html的

 <body ng-app='myApp' ng-controller='myCtrl'>
<div ng-repeat ="t in json.recipe.cat" ng-if="t.name != 'breakfast' && t.name != 'dinner'">
 here : {{t.name}}
</div>

请参阅plunker Code here

固定位置的重复项目

2 个答案: