javascript - AngularJS动态循环访问数组键的动态值

我正在从数据库中生成以下json数据，其中像sid和name这样的键是static，但是task1，task2，task3 ....是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 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的值，但是我得到的是这样的data.task1，data.task2，data.task3，即我正在获取键本身而不是键值。

第二个问题是我想循环最多n次，因此我像这样ng-repeat将n限制为ng-repeat="data in list| limitTo:n"，但是n的值对我来说是未知的。应等于动态任务密钥（或总任务密钥）的最大数目。

例如，如果在数据列表中存在n，task1，task2，task3，task4，则task5将为5，因为总共有5个任务密钥。如果task1至task100存在，则n将为100，因为总共有100个任务键。

实现此目的的一种方法可能是从数组中计数总的唯一键，然后从数组中减去2个静态键，以获取动态键的数量，该数量将用作n的值以限制循环。

例如，在上述数据集中，如果我们能够设法从中计算唯一键的总数，则唯一键为n，sid，name，task1，task2，task3，task4数组，那么在这种情况下，唯一键的总数为7，如果我们从7减去2，那么我们有5个等于数组中动态键的数量，我们想将其用作以限制循环。

任何想法如何使用angularjs解决我的上述问题？

最佳答案

试试这个，它将按您的期望工作。

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>

关于javascript - AngularJS动态循环访问数组键的动态值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44079612/

Task1

javascript - AngularJS动态循环访问数组键的动态值