如何对单个ng-repeat

时间:2016-08-08 13:16:33

标签: angularjs angularjs-ng-repeat key-value

将数据设为:

{  
  "obj1":{  
    "obj11":[  
     {  
        "name":"Tim",
        "roll_number":"45"
     },
     {  
        "name":"Tom",
        "roll_number":"20"
     },
     {  
        "name":"Deny",
        "roll_number":"42"
     }
    ],
    "obj12":[  
     {  
        "name":"Jim",
        "roll_number":"43"
     },
     {  
        "name":"Crook",
        "roll_number":"46"
     },
     {  
        "name":"Michael",
        "roll_number":"48"
     }
    ]
  }
}

具有键“obj11”和“obj12”,想要对与obj1内的这些特定键对应的项目重复特定的HTML代码块。这个重复的块基本上包含对应于数组中每个对象的'name'和'roll_number'。

<div ng-repeat="item in obj1['keyValue']">
  <p>{{item.name}}</p>
  <p>{{item.roll_number}}</p>
</div>

如果keyValue为'obj11',则输出为:           

     

45

               

汤姆

     

20

               

拒绝

     

42

    

4 个答案:

答案 0 :(得分:0)

keyValue分配给$scope变量,然后在没有引号的情况下使用它:

ng-repeat="item in obj1[keyValue]"

JS:

$scope.keyValue = "obj12";

答案 1 :(得分:0)

您无法使用单次重复遍历obj11和obj12。因为obj11和obj12都进一步嵌套。您需要嵌套的ng-repeat,如下所示。考虑将整个json分配给某些变量“data”:

<div ng-repeat="item in data.obj1">
  <div ng-repeat="a in item">
    <p>{{a.name}}</p>
    <p>{{a.roll_number}}</p>
  </div>
</div>

答案 2 :(得分:0)

&#13;
&#13;
angular.module('app', []).controller('HomeCtrl', function($scope) {
  $scope.keyValue = "obj11";

  $scope.obj1 = {
    "obj11": [{
      "name": "Tim",
      "roll_number": "45"
    }, {
      "name": "Tom",
      "roll_number": "20"
    }, {
      "name": "Deny",
      "roll_number": "42"
    }],
    "obj12": [{
      "name": "Jim",
      "roll_number": "43"
    }, {
      "name": "Crook",
      "roll_number": "46"
    }, {
      "name": "Michael",
      "roll_number": "48"
    }]
  };
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>


<div ng-app="app" ng-controller="HomeCtrl">
  <div ng-repeat="item in obj1[keyValue]">
    <p>{{item.name}}</p>
    <p>{{item.roll_number}}</p>
  </div>
</div>
&#13;
&#13;
&#13;

而不是使obj1['keyValue']表示密钥是文字值keyValue,而不是将其绑定为范围变量。

因此,设置$scope.keyValue = "obj11";,其中value是关键。 然后像obj1[keyValue]

中的ng-repeat一样访问它

答案 3 :(得分:0)

您可以通过多种方式实现自己想要的目标。

&#13;
&#13;
var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  
  $scope.item = {
    "myItems": {
      "child1": [{
        "name": "Tim",
        "roll_number": "45"
      }, {
        "name": "Tom",
        "roll_number": "20"
      }, {
        "name": "Deny",
        "roll_number": "42"
      }],
      "child2": [{
        "name": "Jim",
        "roll_number": "43"
      }, {
        "name": "Crook",
        "roll_number": "46"
      }, {
        "name": "Michael",
        "roll_number": "48"
      }]
    }
  };
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  
  <select ng-model="key">
    <option ng-repeat="(key,val) in item.myItems" value="{{key}}">{{key}}</option>
  </select>

  <div ng-repeat="item in item.myItems[key]">
    <p>{{item.name}}</p>
    <p>{{item.roll_number}}</p>
  </div>
</body>
&#13;
&#13;
&#13;