javascript - 为什么 splice 在 angular js 中不能正常工作

Question

我正在尝试制作一个演示，其中我有一个 checkbox 列表。我能够使用 ng-repeat 显示列表。

如果用户单击一个复选框(仅选中一个复选框)，我需要什么。它只显示一列(100%)宽度。哪个用户选中两列，它显示两列等宽(50%)。如果用户选中三列它显示三列等宽..就好像用户选中了四个复选框它显示四列等宽..最初选中了一些复选框(checked:true)..

• 我的第一步是取消选中选中的选项“training 3”..但取消选中后它仍然显示为什么？我已经在使用拼接了。方法？

这是我的代码 http://codepen.io/anon/pen/adBroe?editors=101

   init();
  function init(){
      for(var i =0;i<self.data.length;i++){
      var obj=self.data[i];
         if(obj.checked)
      {
        self.selectedList.push(obj);
      }
    }
    alert('starting '+self.selectedList.length)
  }

  self.checkBoxClick=function(obj,i){
    if(obj.checked)
      {
        alert('if')
        self.selectedList.push(obj);
      }else
        {
          alert('else'+i);
          self.selectedList.splice(i,1);
        }
    alert(self.selectedList.length);

   }

})

这是我要显示的

  <div class='container-fluid'>
    <div class='row'>
      <div ng-repeat="i in vm.selectedList" class='col-xs-{{12/vm.selectedList.length}}'>
        {{i.name}}
      </div>
    </div>
  </div>

Answer 1

它可以简单得多。在 HTML 中，您甚至不需要 ngChange 处理程序，只需绑定(bind)到已检查的属性即可:

  <div class="checkbox" ng-repeat='v in vm.data'>
    <label>
      <input type="checkbox" ng-model='v.checked'> {{v.name}}
    </label>
  </div>

然后只用 ngRepeat 渲染列:

  <div ng-repeat="i in filteredList = (vm.data | filter:{checked:true})" class='col-xs-{{12/filteredList.length}}'>
    {{i.name}}
  </div>

因此，干净的 Controller 完全没有任何逻辑，Angular 使用模板 vm.data | 进行所有必要的列过滤。过滤器:{checked:true}。

演示: http://codepen.io/anon/pen/bEBydL?editors=101