AngularJs:删除项目后取消选中复选框

时间:2016-02-22 19:18:23

标签: javascript angularjs checkbox

在这个简单的问题上花了很多时间并进行了大量的研究后,我想知道是否有人可以给我一些帮助。

我有一个像这样生成的数据:

<tbody>
     <tr class="odd gradeX" ng-repeat="user in ctrl.datas | orderBy:ctrl.sortType:ctrl.sortTypeReverse">
     <td>
        <input type="checkbox" class="checkboxes" value="{{user.id}}" ng-click="ctrl.addItem(user)"/>
     </td>
     <td>
       {{user.given_name}}
     </td>

     <td>
         {{user.family_name}}
     </td>
     <td>
       <a href="mailto:{{user.emai}}"> {{user.email}}</a>
     </td>
     <td class="center" ng-bind-html="ctrl.convertToDate(user.created_at) | date: 'dd-MMMM-yyyy hh:mm'"></td>
     <td>
       <span class="btn blue-hoki"> Details </span>
     </td>
    </tr>
</tbody>

上面是一个容器,我通过复选框获取所选项目,添加数组并让用户能够删除所选项目:

<tr ng-repeat="user in ctrl.checkedObject track by $index" ng-show="user.id">
   <td>{{user.family_name}}</td>
   <td>{{user.given_name}}</td>
   <td>
      <button class="btn blue" ng-click="ctrl.removeItem($index)">Unselect</button>
    </td>
</tr>

在我的控制器中,以下是用于执行此操作的两个函数:

this.checkedObject = [];

//Add selected user

this.addItem = function (user) {
   self.checkedObject.push(user);
};
this.removeItem = function(obj){
   delete self.checkedObject[obj];
};

如果用户更改了他的选择,我想要实现的是取消选中相应的复选框。 问题是,我不知道如何目标相应的复选框。有人有线索吗? 提前致谢

2 个答案:

答案 0 :(得分:1)

尝试检查如下:

 <input type="checkbox" ng-checked="user !== null" class="checkboxes" value="{{user.id}}" ng-click="ctrl.addItem(user)"/>

在按钮单击(内部removeItem())或其他变量上将项目(用户)设置为null。

答案 1 :(得分:1)

I set up a simple plunker显示一种方法,即在选中他/她的复选框时为每个用户分配selected属性,并在对应的复选框上设置ng-checked属性user.selected(如果错误,将取消选中)。

使用这种方法,您不需要从checkedUsers数组中推送和删除,您只需根据是否选中它们来过滤所有用户。

function getSelected() {
  ctrl.checkedObject = _.filter(ctrl.datas, {selected: true});
}

ctrl.selectUser = function (user) {
   user.selected = true;
   getSelected();
};
ctrl.removeUser = function(user){
   user.selected = false;
   getSelected();
};