2017-07-27 112 views
0

有一些HTML,以減少Angularjs HTML需要採用NG-重複

<tr class="matrix_row" ng-repeat="process in matrixCtrl.processes | filter : { park: parentIndex } track by $index"> 
    <td class="properties" ng-click="dashboardCtrl.currParam=0; dashboardCtrl.currentProcess=process">{{process[1]}}</td> 
    <td class="properties" ng-click="dashboardCtrl.currParam=1; dashboardCtrl.currentProcess=process">{{process[2]}}</td> 
    <td class="properties" ng-click="dashboardCtrl.currParam=2; dashboardCtrl.currentProcess=process">{{process[3]}}</td> 
    <td class="properties" ng-click="dashboardCtrl.currParam=3; dashboardCtrl.currentProcess=process">{{process[4]}}</td> 
    <td class="properties" ng-click="dashboardCtrl.currParam=4; dashboardCtrl.currentProcess=process">{{process[5]}}</td> 
    <td class="properties" ng-click="dashboardCtrl.currParam=5; dashboardCtrl.currentProcess=process">{{process[6]}}</td> 
</tr> 

沒有找到我所需要的文檔。我需要做類似於:

<tr class="matrix_row" ng-repeat="process in matrixCtrl.processes | filter : { park: parentIndex } track by $index"> 
    <td class="properties" ng-repeat="key(1,2,3,4,5,6) in process" ng-click="dashboardCtrl.currParam=key; dashboardCtrl.currentProcess=process">{{process[key]}}</td> 

</tr> 

問題是對象具有比1-6更多的屬性。對象看起來像

{ 
    1:"one", 
    2: "two", 
    3: "three", 
    4: "four", 
    5:"five", 
    6:"six", 
    time: "15:14", 
    mail:"[email protected]" 
} 

我需要顯示數字屬性。有沒有辦法做到這一點

<td ng-repeat="key in process" ng-if="!isNaN(key)"> 

+0

'鍵在[1,2,3,4,5,6]' ? – deceze

+0

@deceze它不是一個數組,它是對象。還有更多的屬性比1,2,3,4,5,6 – RoGGeR

+0

是的,但這個數字似乎是這些行中唯一的變量......? – deceze

回答

1

在可以通過過濾預內ng-repeat可變

讓控制器是

app.controller('MainCtrl', function($scope) { 
    $scope.data = { 
    6:"six", 
    1:"one", 
    2: "two", 
    3: "three", 
    4: "four", 
    5:"five", 
    time: "15:14", 
    mail:"[email protected]" 
} 

$scope.filtNum=function(process){ 
    var result = {}; 
    angular.forEach(process, function(value, key) { 
     if(!isNaN(+key) && angular.isNumber(+key)){ 
      result[key] = value; 
     } 
    }); 
    return result; 
} 
}); 

這裏內NG-重複被提及作爲按要求進行

<body ng-controller="MainCtrl"> 
     <div ng-repeat="(key, value) in filtNum(data)">{{value}}</div> 
     </body> 

工作plunker鏈接Click here