Question

我正在尝试将模型绑定到在其内部具有重复的指令上的重复。在外面我看起来像这样

 <div flex="25" ng-model="filterList">
     <div ng-repeat="filter in searchResults.filters" class="builder-result-filters" ng-model="filterlist.filter.name"></div> 
 </div>

所以我试图绑定一个名为filterList的模型中的所有内容，然后第一个重复将通过它的名称绑定第一个重复。然后在指令内部看起来像这样：

<div>
<ul>{{filter.name}}
    <li ng-repeat="value in filter.values">
        <input type="checkbox" ng-model="filterlist.filter.value">{{value}}
    </li>
</ul>
Filters : {{filterlist}}
</div>

（尝试打印模型以查看其是否正常工作）

所以传入的初始数据如下：

"filters": [{
"name": "state",
"values": ["Saved", "Committed", "Published"]
},{
"name": "discipline"
"values": ["Marketing"]
}]

基本上我想制作一个像这样输出的模型（基于那些重复）

{
  {state : {{"saved" : true, "Committed" : false , "Published" : true}},
  {discipline : {{"marketing" : true}}
}

或类似的东西。奖励积分，如果我可以让里面的项目在一个数组中，只是显示输入是否被检查如下：

{
  {state : ["saved", "Published" ]},
  {discipline : []}
}

因此未检查的项目不会显示。这至少是最终目标。现在我只是试图将这些全部绑定到1个模型。

所以我能部分地实现我所期待的目标 - 我尝试过这样的事情：

 <div>
<ul >{{filter.name}}
    <li ng-repeat="value in filter.values track by $index">
        <input type="checkbox" ng-model="testingModel[filter.name][value]">{{value}}
    </li>
</ul>
Filters : {{testingModel}}
</div>

这吐了出来：

  {"discipline":{"Marketing":true},"state":{"Saved":true,"Committed":true}}

我想知道是否有一种快速而肮脏的方法将复选框转换为一个数组，根据它是真还是假来添加或删除该值 - 如下所示：

 {"discipline":["Marketing"],"state":["Saved"]}

假设我取消选中那里的承诺。

Answer 1

ng-model可以从数组中读取，但不能推送（）或拼接（）。

所以编写自己的指令将数组绑定到复选框：

.directive('awArray', function() {
  return {
    restrict: 'A',
    scope: {
      array: '=awArray',
      value: '@'
    },
    link: function(scope, element) {
      element.on('click', function(event) {
        var index = scope.array.indexOf(scope.value);
        scope.$apply(function() {
          if (event.target.checked) {
            if (index < 0) scope.array.push(scope.value);
          } else {
            if (index >= 0) scope.array.splice(index, 1);
          }
        });
      });
    }
  };
});

模板：

<li ng-repeat="item in ctrl.items"><input type="checkbox" array="ctrl.selection" value="{{item.name}}">{{item.name}}</li>

ng-repeat的角度绑定模型传递给指令（带重复）

1 个答案: