Question

我们说我有这个JSON：

var myObj = {
    {"key1":"value1", "key2":5, "key3":"value3" },
    {"key1":"value4", "key2":2, "key3":"value5" },
    {"key1":"value6", "key2":4, "key3":"value6" },
}

我想将它用于ng-Repeat。但＆＃34; key2＆＃34;的价值观必须在他们自己的ng-repeat中迭代。所以像这样：

<ul ng-repeat="x in myObj">
   <li> {{x.key1}} </li>
   <ul ng-repeat="y in x.key2">
      <li></li>
   </ul>
   <li> {{x.key3}} </li>
</ul>

显然这不起作用。第一个数组的结果应该是这样的（应该创建5个li元素）：

<ul>
  <li> value1 </li>
  <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
  </ul>
  <li> value 3 </li>
</ul>

Answer 1

您可以创建range将返回range(n)

的自定义方法[1,2,3, .. n]

<强> HTML

<div ng-controller="MainCtrl">
 <ul ng-repeat="x in myObj">

   <li> {{x.key1}} </li>
   <ul ng-repeat="y in range(x.key2)">
      <li></li>
   </ul>
   <li> {{x.key3}} </li>
</ul>

<强> JS

 $scope.myObj = [
    {"key1":"value1", "key2":5, "key3":"value3" },
    {"key1":"value4", "key2":2, "key3":"value5" },
    {"key1":"value6", "key2":4, "key3":"value6" },
];


$scope.range = function(count){
  var items = []; 
  for (var i = 0; i < count; i++) { 
    items.push(i) 
  } 

  return items;
}

Demo Plunker

Answer 2

在控制器中添加此方法

 $scope.getNumber = function(count){
      return new Array(count);  
    }

并将您的html更新为

 <ul ng-repeat="x in myObj">
       <li> {{x.key1}} </li>
       <ul ng-repeat="y in getNumber(x.key2)">
          <li></li>
       </ul>
   <li> {{x.key3}} </li>
</ul>

在ng-Repeat AngularJS中使用JSON值

2 个答案: