Question

我正在尝试制作一个示例，其中我有一个复选框列表。我可以使用ng-repeat显示列表。

如果用户点击一个复选框（仅选中一个复选框），我需要的是。仅显示一列（100％）宽度。用户选中两列时，它显示两列宽度相等（50％）的列。用户检查三列它显示三个相等宽度的列。如同用户选中四个复选框，它显示四个相等宽度的列。最初选中一些复选框（选中：真实）.. < / p>

我的第一步是取消选中选中的选项＆＃34;培训3＆＃34; ..但是在未经检查之后它仍然显示为什么？我已经使用过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处理程序，只需绑定到checked属性：

  <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使用模板vm.data | filter:{checked:true}进行所有必要的列过滤。

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

Answer 2

这种情况正在发生，因为你试图将它从第二个索引中移除而训练3出现在第0个索引。

else
    {
      alert('unchecked '+i);
      var index = self.selectedList.indexOf(obj);
      self.selectedList.splice(index,1);

    }

将您的其他部分更改为此。它会正常工作。

http://codepen.io/anon/pen/yeVWeQ?editors=101

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

2 个答案: