快捷導(dǎo)航

用angular實現(xiàn)多選按鈕的全選與反選實例代碼

更新時間：2017年05月23日 10:01:20 作者：安靜的對折

本篇文章主要介紹了用angular實現(xiàn)多選按鈕的全選與反選實例代碼，非常具有實用價值，需要的朋友可以參考下

在頁面中我們常常會遇到多選框，例如購物車?yán)锏纳唐?br />

下面用angular來實現(xiàn)這一功能

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title></title> 
  <script src="js/angular.min.js"></script> 
</head> 
<body ng-app="select" ng-controller="moreSel"> 
 
全選: <input type="checkbox" ng-checked="checks" ng-click="checks = !checks; all(checks)"> 
<!--track by $index去掉也可以--> 
<div ng-repeat="item in datas track by $index"> 
<input type="checkbox" ng-checked="chkItem[$index]" ng-click="ck(chkItem[$index]==undefind?false:chkItem[$index], item, $index)">{{ item }} 
</div> 
<pre>{{arr}}</pre> 
</body> 
 
<script> 
  //創(chuàng)建模塊 
  angular.module("select", []) 
      //控制器 
      .controller("moreSel", function ($scope) { 
        $scope.datas = ["C++","Html","Javascript"]; 
        $scope.arr = [];//用來顯示選中的內(nèi)容 
        //用來標(biāo)志每一項的狀態(tài) 
        $scope.chkItem = []; 
 
        //全選 
        $scope.all = function (checks) { 
          //初始化設(shè)置狀態(tài) 
          init(checks); 
          //將選中的內(nèi)容賦值到數(shù)組中 
          if(checks) { 
            for(var i = 0; i < $scope.datas.length; i++) { 
              $scope.arr[i] = $scope.datas[i]; 
            } 
          }else { 
            $scope.arr = []; 
          } 
        } 
 
        //點擊選擇 
        $scope.ck = function (state, item, index) { 
          //取狀態(tài)的相反值 
          $scope.chkItem[index] = !state; 
          //有一個為false則全選按鈕為不選中 
          if(!$scope.chkItem[index]){ 
            $scope.checks = false; 
 
            //取消選中，將數(shù)值從arr數(shù)組中刪除掉 
            var num = $scope.arr.indexOf(item); 
            $scope.arr.splice(num, 1); 
          }else { 
            //選中追加進(jìn)去 
            $scope.arr.push(item); 
            for(var i = 0; i < $scope.datas.length; i++) { 
              //只要有一個按鈕沒有選中 
              if(!$scope.chkItem[i]){ 
                return; 
              } 
            } 
            //全部選中 
            $scope.checks = true; 
          } 
        } 
 
        //初始化 
        var init = function (sel) { 
          for(var i = 0; i < $scope.datas.length; i++) { 
            //sel沒有值 默認(rèn)初始化false 
            $scope.chkItem[i] = sel || false; 
          } 
        } 
      }); 
</script> 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: