在这个简单的问题上花了很多时间并做了大量的研究之后,我想知道是否有人可以给我一些帮助。
我有在表中生成的数据,如下所示:
<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];
};
我想实现的是,如果用户更改了他的选择,则取消选中相应的复选框。问题是,我不知道如何定位相应的复选框。有人知道吗?提前致谢
尝试ng-check,如下所示:
<input type="checkbox" ng-checked="user !== null" class="checkboxes" value="{{user.id}}" ng-click="ctrl.addItem(user)"/>
并在单击按钮时将项目(用户)设置为 null(在 removeItem() 内)或其他变量。
我设置了一个简单的 plunker 来展示一种方法,即在选中他/她的复选框时为每个用户分配一个 selected
属性,并在复选框上设置一个对应于user.selected
的ng-checked
属性(因此在 false 时将取消选中)。
使用这种方法,您无需从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();
};