需要使用 ng-repeat 在 Angularjs 中减少 HTML

Question

有一些HTML

 <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:"somemail@mail.com"
 }

我需要显示数字属性。没有

有没有办法做到这一点

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

?

Answer 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:"somemail@mail.com"
 }

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

这里按要求提到了内部的ng-repeat

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

工作的 plunker link Click here

需要使用 ng-repeat 在 Angularjs 中减少 HTML

Need to reduce HTML in Angularjs using ng-repeat

html

javascript

angularjs

angularjs-ng-repeat