2

我想知道是否可以使用NG-重复的模型是这样的:AngularJS NG-重复这个模型

实例型号:

$scope.items = { 
    item1:{[1,2,3,4,5]}, 
    item2:{[a,b,c,d,e]}, 
    item3:{[a1,b2,c3,d4,e5]} 
}; 

该表应像这样使用ng-repeat:

------------------------- 
| Item1 | Item2 | Item3 | 
------------------------- 
| 1 | a | a1 | 
| 2 | b | b2 | 
| 3 | c | c3 | 
| 4 | d | d4 | 
| 5 | e | e5 | 
------------------------- 

如果这是不可能的使用这种模式,你可以请建议一些alernatives?任何帮助将不胜感激。提前致谢。

回答

4

你可以改变这样的

function Ctrl($scope) { 
    $scope.items = [{ 
     item1: 1, 
     item2: 'a', 
     item3: 'a1' 
    }, { 
     item1: 2, 
     item2: 'b', 
     item3: 'b2' 
    }, { 
     item1: 3, 
     item2: 'c', 
     item3: 'c3' 
    }, ...]; 
} 

<div ng-app ng-controller="Ctrl"> 
    <table> 
     <tbody> 
      <th>item1</th> 
      <th>item2</th> 
      <th>item3</th> 
      <tr ng-repeat="item in items">{{item}} 
       <td>{{item.item1}}</td> 
       <td>{{item.item2}}</td> 
       <td>{{item.item3}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

DEMO

+0

谢谢你的提示。 :) – sharic19

2

如果你不能/不想改变你的数据结构,或者不知道数据模型提前数量的键等等,你也可以在飞行中操纵它。下面是使用对象的任何数字键的任意长度的阵列算法(只要每个阵列具有相同的长度):

var results = { headers: [], values: [] }; 
angular.forEach(items, function(value, key) { 
    results.headers.push(key); 
    angular.forEach(value, function(inner, index) { 
    results.values[index] = results.values[index] || []; 
    results.values[index].push(inner); 
    }); 
}); 
return results; 

一旦你有你换位阵列,可以遍历它编程:

<table ng-controller="DataController"> 
    <tr> 
    <th ng-repeat="header in transposed.headers">{{header}}</th> 
    </tr> 
    <tr ng-repeat="ary in transposed.values"> 
    <td ng-repeat="item in ary">{{item}}</td> 
    </tr> 
</table> 

这里有一个演示是重新调换每次改变时间items对象:http://jsfiddle.net/BinaryMuse/BAGL5/

+0

谢谢。我已经改变了我的模型,但这可能会在未来帮助我。感谢您分享您的知识。 – sharic19