AngularJS实现多选

AngularJS 实现多选

JS代码

1.定义勾选的ID集合

2.使用AngularJS内置对象$event，循环获得用户勾选的CheckBox选项id

3.判断用户是否勾选($event.target的状态，选中为true)，选中则将传递的参数id增加到集合中

4.未选中(取消勾选)则删除集合中的该元素

1. 每一个选项都是独立的单元，默认都是未选中状态

5.使用splice()方法，在获得取消勾选的元素的索引后，从集合中删除该元素

//思路整理
//$event 是一个圆,指的是input本身
$scope.selectIds = [];//用户勾选的id集合
$scope.updateSelection = function ($event, id) {
    //只有被选中的时候才添加到ids集合中
    if ($event.target.checked) {
        $scope.selectIds.push(id);//push向集合中添加元素
    } else {
        //如果没被选中则删除集合中的元素
        var index = $scope.selectIds.indexOf(id);//查找值的位置
        $scope.selectIds.splice(index, 1);//参数1:移除的位置 参数2:移除的个数
    }
};

HTML代码

<tr ng-repeat="entity in list">
    <td><input type="checkbox" ng-click="updateSelection($event,entity.id)">td>
    <td>{{entity.id}}td>
    <td>{{entity.goodsName}}td>
    <td>{{entity.price}}td>
    <td>{{itemCatList[entity.category1Id]}}td>
    <td>{{itemCatList[entity.category2Id]}}td>
    <td>{{itemCatList[entity.category3Id]}}td>
    <td>{{status[entity.auditStatus]}}td>
    <td class="text-center">
      <a href="goods_edit.html#?id={{entity.id}}" class="btn bg-olive btn-xs">详情a>
    td>
tr>