2016-05-16 30 views
0

所以我有一個產品列表;他們的專欄從兩個動態地改變。 總是會有一個id列和一個名稱列。 如何才能讓ng-repeat在顯示其他列的值之前不知道它們是什麼,直到運行時才顯示出來?AngularJS ng-repeat動態列

+0

最好用一個例子來解釋。 –

+0

這對你有幫助嗎? http://stackoverflow.com/questions/26377799/bind-dynamic-columns-to-a-table-using-angularjs – mariocatch

回答

0

我不知道你在尋找什麼樣的佈局,但類似這樣的東西基本上需要一個對象的所有成員,並將它們引入一個可以用ng-repeat迭代的數組。

<html> 
<head> 
    <link rel="stylesheet" 
</head> 
<body ng-app="app" ng-controller="myController as ctrl"> 
    <table> 
     <tr ng-repeat="room in ctrl.rooms | filter: ctrl.expand"> 
      <td ng-repeat="prop in room.props"> 
       {{room[prop]}} 
      </td> 
     </tr> 
    </table> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js "></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js "></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js "></script> 
    <script> 
     angular.module("app",[]).controller("myController", myController) 

    function myController() { 
     var vm = this 

     vm.rooms = [ 
      { 
       name: 'Room 1', 
       floor: 1, 
       carpet: "shag" 
      }, 
      { 
       name: 'Room 2', 
       doors: 2, 
       windows: 4 
      }, 
      { 
       name: 'Room 3', 
       size: "12x12", 
       color: "green" 
      } 
     ]; 

     vm.expand = function(room) { 
     if (!room.props) { 
      room.props=[]; 
      for (var prop in room) { 
       if (prop.indexOf("$") != 0 && prop !=="props") { 
        room.props.push(prop) 
       } 
      } 
     } 
     return true; 
     } 
    } 
    </script> 
</body> 
</html> 

沒有函數調用,你也可以使用這樣的事情:

<div ng-repeat="room in ctrl.rooms"> 
    <div ng-repeat='(key, val) in room'> 
     <p>{{key}}: {{val}}</p> 
    </div> 
</div> 
0

不能完全確定您在使用這裏工作的話,但你可以用過濾和NG-篩選出的數據重複。

Link to SO on that topic.