Question

我对angularjs有以下代码：

<div ng-app>
    <div ng-controller="myCtrl">
        <div ng-repeat="data in job.data"><!-- get unique loads -->
            <!-- output load -->
            <input type="text" ng-model="data.value"/><!-- output load inputs -->
        </div>
    </div>
</div>

function myCtrl($scope) {
    $scope.job = {data:[{name:'a',value:'',load:0},{name:'b',value:'',load:0},{name:'a',value:'',load:1},{name:'b',value:'',load:1}]};
}

想要以下

<div>
    1
    <input type="text" name="(0a)">
    <input type="text" name="(0b)">
</div>
<div>
    2
    <input type="text" name="(1a)">
    <input type="text" name="(1b)">
</div>

我尝试过创建两个过滤器，一个用于标识唯一的加载，另一个用于标识具有该特定加载的对象，但是当我从数据中删除项目时，angular 丢失了引用（因为它不是实际的循环数据），因此无法正确清理DOM。

我在job.data上尝试使用$ watchCollection，在那里我使用load创建了一个$ scope.loads数组，但是也丢失了引用并且没有清理DOM。

那么实现所需输出的正确方法是什么，我能够更改job.data并正确更新DOM？

Answer 1

您只需要转换数据结构以支持“按负载循环”范例。尝试

_.uniq(
  _.map(
    _.sortBy(
      $scope.job.data,
      'load'
    ),
    function (item) {
      return item.load;
    }
  )
)

（使用Lodash）获取负载，然后在外层上循环加载，并在内层加载过滤。

相同数据上的角度双循环

1 个答案: