Question

我正在从我的数据库生成以下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我不知道{1}}。task1应该等于最大数量的动态任务密钥（或总任务密钥）。

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

实现这一目标的一个想法是计算数组中的唯一键，然后从中减去2个静态键，以获得动态键的数量，这些键将用作sid的值来限制循环。 / p>

例如，在上述数据集中，唯一键为name，task1，task2，task3，task4，task5，{ {1}}如果以某种方式我们可以设法计算数组中唯一键的总数，那么在这种情况下唯一键的总数将是7，如果我们从数字7中减去2，那么我们有5等于数组中动态键的数量，我们希望用n来限制循环。

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

Answer 1

我假设项目中task属性的总数可能会有所不同。

通过返回以 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/

Answer 2

尝试一下，它会按照您的期望运作..

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 3

data [0]包含JSON数据，而data [1]包含动态密钥

<tr ng-repeat="x in data[0] ">
        <td ng-repeat="j in data[1]">
        [[ x[j] ]] 
        </td>
 </tr>

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

3 个答案: