时间戳

首页 > 解决方案 > 如何对具有多个 ng-repeats angularjs 的嵌套表进行排序

angularjs - 如何对具有多个 ng-repeats angularjs 的嵌套表进行排序

问题描述

我搜索了一个类似的示例，发现丢失了示例，但它们都没有与我的 json 数据相同的数据结构，所以我尝试了所有方法但没有成功。这是我的 json 数据

vm.result = [
  {
    'first': [ 
      {"indicate":"all", "text":"All views"},
      {"indicate":"userview", "text":"User view"},
      {"indicate":"operatorview", "text":"Operator view"}
    ]
  },
  {
    'second': [ 
      {"indicate":"receipts","text":"Receipts"},
      {"indicate":"other", "text":"Other"},
      {"indicate":"error", "text":"Error resolver"}
    ]
  }
];

这是我的桌子

<table class="table" >
  <thead>
    <tr>
      <th ng-show="column">Key</th>
      <th>Master</th>
      <th>Editable</th>
    </tr>
  </thead>
  <tbody ng-repeat="res in vm.result track by $index">
    <tr  ng-repeat="ed in res.first | filter: searchfield | orderBy: 'indicate'  track by $index">
      <td {{ed.indicate}}</td>
      <td>{{ed.text}}</td>
      <td> {{vm.result[1].second[$index].indicate}}</td>
      <td > {{vm.result[1].second[$index].text}}</td>               
    </tr>
  </tbody>
</table>

OrderBy 仅适用于第一个数组，但不适用于第二个数组，是的，我尝试在第二个 ng-repeat 中的 re 之后首先删除，但随后它无法将其识别为数组。我需要表中的这种结构，以便每个数组都有自己的数据列。那么如何为两个数组添加 orderBy 指示？

预期输出：

Master           Editable
all      |   All      | receipts   | Receipts
userview | User view  | other      |Other

标签： angularjsnestedangularjs-ng-repeatsql-order-by

解决方案

结果数据的格式很差。转换您的预期输出非常困难。尝试使用这样的结果数组或转换为这种格式，

$scope.newResult   = [{
     first:{"indicate":"all", "text":"All views"},
    second:{"indicate":"receipts","text":"Receipts"}
  },
  {
     first:{"indicate":"userview", "text":"User views"},
    second:{"indicate":"other","text":"Other"}
  },
  {
     first:{"indicate":"operatorview", "text":"Operator views"},
    second:{"indicate":"error","text":"Error resolver"}
  }
]

HTML 代码

<table >
   <thead>
    <tr>
     <th>Key</th>
      <th colspan="2">Master</th>
      <th colspan="2">Editable</th>
    </tr>
  </thead>
  <tbody >
 <tr ng-repeat="res in new">
 <td>{{$index+1}}</td>
    <td>{{res.first.indicate}}</td>
    <td>{{res.first.text}}</td>
    <td>{{res.second.indicate}}</td>
    <td>{{res.second.text}}</td>
  </tr>
  </tbody>

  </table>

控制器

 $scope.result = [
  {
    'first': [ 
      {"indicate":"all", "text":"All views"},
      {"indicate":"userview", "text":"User view"},
      {"indicate":"operatorview", "text":"Operator view"}
    ]
  },
  {
    'second': [ 
      {"indicate":"receipts","text":"Receipts"},
      {"indicate":"other", "text":"Other"},
      {"indicate":"error", "text":"Error resolver"}
    ]
  }

];
$scope.new=[];
angular.forEach($scope.result, function(value, key) {
    if(key ===0){
    angular.forEach(value.first, function(val, k) {
     $scope.new.push({'first':val,'second':''});
     })
    }
    if(key ===1){
    angular.forEach(value.second, function(val, k) {
     $scope.new[k].second = val;
     })
    }

});

使用这种类型的机制，您可以获得预期的输出，但更好的方法是对结果数组使用良好的数据格式。 jsfiddle为此。

推荐阅读