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

why splice not work properly in angular js

本文关键字：常工作 工作 不能 拼接 angular js 为什么      更新时间：2023-09-26

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

我需要的是，如果用户点击一个复选框（只选中一个复选盒）。它只显示一列（100%）宽度。哪个用户选中两列，它显示两列相等宽度（50%）。如果用户选中三列，它会显示三列相等宽度。。就好像用户选中了四个复选框一样，它显示了四列宽度相等的列。。最初会选中某些复选框（选中：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>

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

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

发生这种情况的原因是，当训练3出现在第0个索引时，您正试图将其从第2个索引中删除。

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

把你的其他部分改成这个。它会很好用的。

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

相关文章：