Angularjs动态循环访问数组键的动态值

Question

我生成从我的数据库，其中相同的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/> 

上面的代码很适合像TASK1，TASK2，TASK3固定键......但我产生"task"关键动态所以这将是我总是不知道有多少个任务键在那里。当从task1到task100有键时，可能会出现这种情况，所以上面的代码在这种情况下会失败。

我正在尝试动态访问任务键以生成关联数据。为了实现此目的，我使用任务键连接了一个数字（由增量循环生成），以便我变得像task1，task2 .... value ñ

<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 

我面对here.After级联我应该得到相应的task key的价值两个问题，但我越来越喜欢这个data.task1，data.task2，data.task3是我得到的密钥本身，而不是键值。

第二个问题是我想环路高达n多次，所以我限制ng-repeat通过n像这样ng-repeat="data in list| limitTo:n"但n价值是未知的me.Here n应该等于数最高动态任务键（或全部任务键）。

例如，如果在数据列表中存在task1，task2，task3，task4，task5然后n为5，因为总共有5任务keys.If存在TASK1到task100然后n将100总共有100个任务键。

实现此目的的一个想法可能是从阵列中计算总的唯一键，然后从中减去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/