2017-09-02 114 views
2

内的JSON的值,让我们说我有这样JSON:使用NG-重复AngularJS

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

我想用这个NG-重复。但是“key2”的值必须在他们自己的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锂元素应该被创建):

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

回答

2

可以创建自定义方法rangerange(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

0

在控制器中添加这种方法

$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>