Angularjsダイナミックループは

Question

Iはsidとname等キーはstaticしかしtask1、task2ある私のデータベース、task3からJSONデータを以下の生成い.... dynamicある配列のキーの動的な値にアクセスし、それらが値N件までとすることができますN = 1,2,3 ......）

マイデータ：

[ 
    {"sid":"10","name":"nam1","task1" :"1","task2" :"0","task3" :"1","task4" :"0","task5" :"0"}, 

    {"sid":"20","name":"nam2","task1" :"0","task2" :"1","task3" :"0","task4" :"1","task5" :"1"}, 

    {"sid":"30","name":"nam3","task1" :"1","task2" :"1","task3" :"0","task4" :"0","task5" :"1"}, 

    {"sid":"40","name":"nam4","task1" :"0","task2" :"0","task3" :"0","task4" :"0","task5" :"1"} 
    ] 

app.js

app.controller('taskCrtl', function ($scope, $http, $timeout) { 
    $http.get('get.php').success(function(data){ 
     $scope.list = data; 
     $scope.currentPage = 1; //current page 
     $scope.entryLimit = 5; //max no of items to display in a page 
     $scope.filteredItems = $scope.list.length; //Initially for no filter 
     $scope.totalItems = $scope.list.length; 
    }); 

今、私は以下のようにng-repeatを使用してキーの値にアクセスしようとしています：

<tr ng-repeat="data in list| unique: 'sid'"> 
     <td>{{data.sid }}</td> 
     <td>{{data.name}}</td> 
     <td>{{data.task1}}</td> 
     <td>{{data.task2}}</td> 
     <td>{{data.task3}}</td> 
     <td>{{data.task4}}</td> 
     <td>{{data.task5}}</td> 

    <tr/> 

上記のコードはタスク1、タスク2、TASK3などの固定キーに適しています...しかし、それはなりますので、私は動的に"task"鍵を生成していますタスクのキーが何個あるかは私には常に分かりません。タスク1からタスク100までのキーがある場合がありますので、上記のコードは失敗します。

私は、関連するデータを生成するためにタスクキーに動的にアクセスしようとしています。これを達成するために、私はtask1、task2 ....のようになるように（増分ループによって生成された）数値を連結します。 nは

<tr ng-repeat="data in list| unique: 'sid'"> 
     <td> {{ data.sid }} </td> 
     <td> {{ data.name }} </td> 
     <td ng-repeat="data in list| limitTo:n"> 
     {{ id=$index+1; 'data.task'+id}} 
     </td> 
    </tr> 
Id starts with 1 and incremented in every loop so that we can dynamically access data.task1,data.task2 and so on 

は、私は私が対応するtask keyの値を取得することになったhere.After連結二つの問題に直面していますが、私は、キー自体の代わりに、キー値を取得しています。このdata.task1、data.task2、data.task3のように取得しています。

第二の問題は、私は最高の数と同じでなければなりませんme.Here nに知られていないので、私はこのようng-repeat="data in list| limitTo:n"が、nの値のようなnによってng-repeatを制限してい回のn数までループしたいです動的タスクキー（または全タスクキー）。例えば

データリストにtask1、task2、task3、task4、task5次いでn 5あろうが存在する場合は、合計5タスクはtask100するTASK1が存在keys.Ifされているので、合計があるので、次にn 100なり100タスクキー。

これを達成するための考え方の1つは、アレイからの総ユニークキーを数えてから、2つの静的キーを減算して、動的キーの数を取得します。これはループを制限するためにnの値として使用されます。上記のデータ、例えば

は、我々は、アレイのユニークなキーの総数からユニークキーの総数を計算するために管理することができる何らかの方法であればユニークキーは sid、 name、 task1、 task2、 task3、 task4、 task5あるセットしますこの場合7であり、7から2を引くと、配列内の動的キーの数に等しい5があります。これは、ループを制限するために nとして使用します。

angularjsを使って私の上記の問題を解決する方法はありますか？

Answer 1

それはあなたの期待どおりに動作します、これを試してみてください。..

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.list = [ 
 
    {"sid":"10","name":"nam1","task1" :"1","task2" :"0","task3" :"1","task4" :"0","task5" :"0"}, 
 

 
    {"sid":"20","name":"nam2","task1" :"0","task2" :"1","task3" :"0","task4" :"1","task5" :"1"}, 
 

 
    {"sid":"30","name":"nam3","task1" :"1","task2" :"1","task3" :"0","task4" :"0","task5" :"1"}, 
 

 
    {"sid":"40","name":"nam4","task1" :"0","task2" :"0","task3" :"0","task4" :"0","task5" :"1"} 
 
    ]; 
 

 
for (var i in $scope.list) { 
 
    var res = Object.keys($scope.list[i]).filter(item => { return item.indexOf("task") > -1; }); 
 
    $scope.tasksList = res; 
 
} 
 
    
 
});

table,td { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
<table> 
 
    <tr ng-repeat="data in list"> 
 
     <td> {{ data.sid }} </td> 
 
     <td> {{ data.name }} </td> 
 
     <td ng-repeat="item in tasksList"> {{ data[item] }} </td> 
 
    </tr> 
 
</table> 
 
</div>

Answer 2

アイテム上のtask属性の総数が変更される可能性があるとします。

あなたの代わりにそのリストを反復処理することができますタスクで始まるキーのリストを返すと、その機能とすることにより、あなたはngRepeatの各反復中にいることを呼び出すことができます。

$scope.getTaskKeys = function(row) { 
    return Object.keys(row).filter(function(keyname) { 
     return keyname.startsWith('task'); 
}); 

に無料であなたを残します

<tr ng-repeat="data in list| unique: 'sid'"> 
     <td> {{ data.sid }} </td> 
     <td> {{ data.name }} </td> 
     <td ng-repeat="taskKey in getTaskKeys(data)"> 
     {{data[taskKey]}} 
     </td> 
</tr> 

ここで働い例作成：：https://jsfiddle.net/zd1yjc0m/

を2回目の反復のためのコレクションとしてそれを呼び出します