2017-07-27 77 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