angularjs實現 checkbox全選、反選的思考

時間 2019-12-19

標籤 angularjs 實現 checkbox 全選思考欄目 AngularJS 简体版

原文原文鏈接

以前作了一週的打醬油測試，其實感受其實測試也是上輩子折翼的天使。
好長時間沒寫代碼，感受好多都不會了。
感謝這周沒有單休，我能看熬夜看奧運了。我能有時間出去看個電影，我能有時間出去逛個商城，我能有時間在家憋一篇博文，順便在家加班寫項目的東西。
不加班萬歲萬歲！！！（求領導看到！哈哈）html

而後說正題吧！！！angularjs

中國隊加油！中國隊加油！！！api

好吧真的是正題！！！數組

需求

1 還有個總的checkbox 負責全選和反選
2 當每一項開頭都選中checkbox的時候，上面的全選自動選上
3 當全選後，取消其中一項的checkbox,全選取消app

實踐

我表示剛開始我是不會的！！！測試

思路1 上網查找demo

而後開始查資料this

發現個不錯的網上案例like this > demospa

感受很是符合個人需求，可是看到demo。3d

缺點：沒玩幾下就發現沒法符合需求二、3。可是貌似1 是能夠實現的。

思路2 ng-checked

開始查了下checkbox在angularjs裏面的用法和ng-checked,發現若是用了ng-checked 目測能夠實現code

html

<div ng-controller="myController">
    <label for="flag">全選
        <input id="flag" type="checkbox" ng-model="select_all" ng-click="selectAll()">
    </label>
    <ul>
        <li ng-repeat="i in list">
            <input type="checkbox" ng-model="m[i.id]" ng-checked = "select_one" ng-click="selectOne(m[i.id])">
            <span>{{i.id}}</span>
        </li>
    </ul>
</div>

var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
    $scope.list = [
        {'id': 101},
        {'id': 102},
        {'id': 103},
        {'id': 104},
        {'id': 105},
        {'id': 106},
        {'id': 107}
    ];
    $scope.m = [];
    $scope.checked = [];
    $scope.selectAll = function () {
        if($scope.select_all) {
            $scope.select_one = true;
            $scope.checked = [];
            angular.forEach($scope.list, function (i, index) {
                $scope.checked.push(i.id);
                $scope.m[i.id] = true;
            })
        }else {
            $scope.select_one = false;
            $scope.checked = [];
            $scope.m = [];
        }
        console.log($scope.checked);
    };
    $scope.selectOne = function (select) {
        angular.forEach($scope.m , function (i, id) {
            var index = $scope.checked.indexOf(id);
            if(i && index === -1) {
                $scope.checked.push(id);
            } else if (!i && index !== -1){
                $scope.checked.splice(index, 1);
            };
        });
        if ($scope.list.length === $scope.checked.length) {
            $scope.select_all = true;
        } else {
            $scope.select_all = false;
        }
        console.log($scope.checked);
    }
}]);
}]);

缺點參考 not-binding-to-ng-checked-for-checkboxes

大概意思說若是你用了ng-checked 就是默認它最初定義就是true, 所以就沒有必要使用ng-model了。簡單說來就是ng-model和ng-checked不須要同時用。

看來是能用ng-click 或者 ng-change了

思路3 給數組裏面每個list 綁定checked 的屬性

這個想法也是聯想到公司以前的一個大牛的寫的一個關於checkbox的指令。

html

<div ng-controller="myController">
    <label for="flag">全選
        <input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()">
    </label>
    <ul>
        <li ng-repeat="i in list">
            <input type="checkbox" ng-model="i.checked" ng-change="selectOne()">
            <span>{{id}}</span>
        </li>
    </ul>
</div>

var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
    $scope.list = [
        {'id': 101},
        {'id': 102},
        {'id': 103},
        {'id': 104},
        {'id': 105},
        {'id': 106},
        {'id': 107}
    ];
    $scope.m = [];
    $scope.checked = [];
    $scope.selectAll = function () {
        if($scope.select_all) {
            $scope.checked = [];
            angular.forEach($scope.list, function (i) {
                i.checked = true;
                $scope.checked.push(i.id);
            })
        }else {
            angular.forEach($scope.list, function (i) {
                i.checked = false;
                $scope.checked = [];
            })
        }
        console.log($scope.checked);
    };
    $scope.selectOne = function () {
        angular.forEach($scope.list , function (i) {
            var index = $scope.checked.indexOf(i.id);
            if(i.checked && index === -1) {
                $scope.checked.push(i.id);
            } else if (!i.checked && index !== -1){
                $scope.checked.splice(index, 1);
            };
        })

        if ($scope.list.length === $scope.checked.length) {
            $scope.select_all = true;
        } else {
            $scope.select_all = false;
        }
        console.log($scope.checked);
    }
}]);

推薦第三種方法！以上

參考