angular 实现前端全选，反选

最新推荐文章于 2019-08-13 15:18:34 发布

chenguangyou

最新推荐文章于 2019-08-13 15:18:34 发布

阅读量396

点赞数

分类专栏： angularjs 文章标签： js select angular checked

本文链接：https://blog.csdn.net/chenguangyou/article/details/82932116

版权

angularjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
<script src="/plugins/angularjs/angular.min.js"></script>
</head>
<body>
<table>
      <tr>
         <th ><input id="selall"
            type="checkbox"  ng-model="select_all" ng-click="selectAll()"></th>
      </tr>
      <tr ng-repeat="item in dataList">
         <td>
           <input type="checkbox" ng-click="updateSelect(item)" ng-model="item.checked" >        
         </td>
      </tr>
</table>
</body>
<script>
var app = angular.module("myapp",[]);
app.controller("myController",funtion($scope){
$scope.dataList = [{'id':1},{'id':2},{'id':3},{'id':4},{'id':5},{'id':6}];
$scope.selectAll = function () { // 选择全部
        $scope.selectIds = [];  // 收集选中的ID
        angular.forEach($scope.dataList,funtion(item){
            // dataList非继承可以使用angular.forEach
            //dataList是继承的使用-------》 for (var i = 0; i < $scope.dataList.length; i++)
            //var item = $scope.dataList[i];
            item.checked =! item.checked; // 更改选项的选定状态
            if ( item.checked ){ 
                $scope.selectIds.push(item.id); 
            }else {
                $scope.selectIds.splice($scope.selectIds.indexOf(item.id),1);
            }
        });
    $scope.select_all = $scope.dataList.length === $scope.selectIds.length;
    console.log($scope.select_all);
    console.log($scope.selectIds);
};

$scope.updateSelect=function (item) { //每个选项按钮的点击事件
        var index = $scope.selectIds.indexOf(item.id);
        if (item && index === -1){
            $scope.selectIds.push(item.id);
        }else if (!item.checked && index !==  -1 ){
            $scope.selectIds.splice(index,1);
        }
    $scope.select_all = $scope.dataList.length === $scope.selectIds.length;
    console.log($scope.selectIds);
};
</script>
</html>

chenguangyou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular 实现前端全选，反选

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;demo&lt;/title&gt;&lt;script src="/plugins/angularjs/angular.min.js"&gt;&lt;
复制链接

扫一扫