2017-07-27 16 views
0

ngのリピートを使用してAngularjsでHTMLを削減する必要があるは、いくつかの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:"[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リピートが要件ごとに記載されている。ここで

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-repeat可変

をプレフィルタリングすることによって行うことができる

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

ワーキングプランカーリンクClick here