RoGGeR RoGGeR - 1 year ago 99
AngularJS Question

Need to reduce HTML in Angularjs using ng-repeat

Having some 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>


Didn't find what I need in documentation. I need to make something like:

<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>


The problem is that objects have more properties than 1-6. Object looks like

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


I need to display numeric properties. Is there any way to do this without

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


?

Answer Source

In can be done by pre-filtering inner ng-repeat variable

Let the controller be

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;
 }
});

Here the inner ng-repeat is mentioned as per the requirement

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

Working plunker link Click here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download