为什么拼接在角度js中不能正常工作

Question

我正在尝试制作一个我有一个复选框列表的演示.我能够使用ng-repeat显示列表.

如果用户点击一个复选框(仅选中一个复选框),我需要的是.仅显示一列(100%)宽度.用户选中两列时,它显示两列宽度相等(50%).如果用户选中三列列,它显示三个相等宽度的列.如同用户选中四个复选框,它显示四个相等宽度的列..最初选中一些复选框(选中:true)..

• 我的第一步是取消选中已选中的选项 "training 3"..但是在取消选中之后它仍会显示为什么？我已经使用过splice了.方法 ？

这是我的代码 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处理程序，只需绑定到选中的属性即可：

  <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>

因此，结果是，干净的控制器根本没有任何逻辑，Angular 使用 template 进行所有必要的列过滤vm.data | filter:{checked:true}。

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