快捷導(dǎo)航

Angular.JS判斷復(fù)選框checkbox是否選中并實時顯示

更新時間：2016年11月30日 10:44:29 投稿：daisy

最近因為工作需要做了一個選擇標(biāo)簽的功能，把一些標(biāo)簽展示給用戶，用戶選擇自己喜歡的標(biāo)簽，就類似我們在購物網(wǎng)站看到的那種過濾標(biāo)簽似的，所以這篇文章就給大家介紹了Angular.JS判斷復(fù)選框checkbox是否選中并實時顯示的方法，下面來一起看看吧。

首先來看看簡單的效果圖，如下所示：

看一下html代碼：

<!DOCTYPE html>
<html data-ng-app="App">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 <script src="script2.js"></script>
</head>
<body data-ng-controller="AddStyleCtrl">

 <div>Choose Tags</div> 
 <div>
  <div>You have choosen:</div>
  <hr>
  <label data-ng-repeat="selectedTag in selectedTags">
   (({{selectedTag}}))
  </label>
  <hr>
  <div data-ng-repeat="category in tagcategories">
   <div>{{ category.name }}</div>
   <div data-ng-repeat="tag in category.tags">
    <div>
     <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
     {{ tag.name }}
    </div>
   </div>
   <hr>
  </div>
 </div>

<pre>{{selected|json}}</pre>
<pre>{{selectedTags|json}}</pre>

</body>
</html>

line2 定義了AngularJS App；

line4 引入angularjs腳本；

line5 引入自己寫的script2.js腳本；

line7 指定控制器AddStyleCtrl

line13-15 實時顯示已選標(biāo)簽給用戶看；

line17-line26 使用雙重循環(huán)列出數(shù)據(jù)庫（本例中就存儲在了controller的一個對象里）中的數(shù)據(jù)；

　　line21的這行代碼作用可大了：<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">

　　存儲了tag的id，name，利用isSelected(tag.id)來判斷是否被checked，點擊時候調(diào)用updateSelection($event,tag.id)方法；

　　如果想 ng-click 觸發(fā)的函數(shù)里獲取到該觸發(fā)該函數(shù)的元素不能直接傳入 this ，而需要傳入 event。因為在Angularjs里面，這個地方的this是event。因為在Angularjs里面，這個地方的this是scope 。我們可以傳入 event，然后在函數(shù)里面通過event，然后在函數(shù)里面通過event.target 來獲取到該元素。

line29-30 是測試時候給自己看的，可以看到selected數(shù)組和selectedTags數(shù)組中的內(nèi)容；

然后看看AngularJS代碼：（script2.js）

/**
 * Created by zh on 20/05/15.
 */
// Code goes here

var iApp = angular.module("App", []);



iApp.controller('AddStyleCtrl', function($scope)
{
 $scope.tagcategories = [
  {
   id: 1,
   name: 'Color',
   tags: [
    {
     id:1,
     name:'color1'
    },
    {
     id:2,
     name:'color2'
    },
    {
     id:3,
     name:'color3'
    },
    {
     id:4,
     name:'color4'
    },
   ]
  },
  {
   id:2,
   name:'Cat',
   tags:[
    {
     id:5,
     name:'cat1'
    },
    {
     id:6,
     name:'cat2'
    },
   ]
  },
  {
   id:3,
   name:'Scenario',
   tags:[
    {
     id:7,
     name:'Home'
    },
    {
     id:8,
     name:'Work'
    },
   ]
  }
 ];

 $scope.selected = [];
 $scope.selectedTags = [];

 var updateSelected = function(action,id,name){
  if(action == 'add' && $scope.selected.indexOf(id) == -1){
   $scope.selected.push(id);
   $scope.selectedTags.push(name);
  }
  if(action == 'remove' && $scope.selected.indexOf(id)!=-1){
   var idx = $scope.selected.indexOf(id);
   $scope.selected.splice(idx,1);
   $scope.selectedTags.splice(idx,1);
  }
 }

 $scope.updateSelection = function($event, id){
  var checkbox = $event.target;
  var action = (checkbox.checked?'add':'remove');
  updateSelected(action,id,checkbox.name);
 }

 $scope.isSelected = function(id){
  return $scope.selected.indexOf(id)>=0;
 }
});

line6 定義了angular app；

line10 定義了控制器AddStyleCtrl；

line12-63 定義了標(biāo)簽對象

line64，66 聲明了$scope中的兩個數(shù)組對象（可以合并為1個），分別用來存儲tag的id和name；

line68-78 定義了updateSelected方法，這個方法會被updateSelection調(diào)用；

　　line69-72：如果add操作且 ‘?dāng)?shù)組[id]' 元素不存在，向數(shù)組中添加數(shù)據(jù)（id，name）；

　　line73-77：如果remove操作且‘?dāng)?shù)組[id]' 元素存在，從數(shù)組中刪除數(shù)據(jù)（id，name）；

line80-84定義了updateSelection方法，這個方法會在html頁面的checkbox被點擊時調(diào)用；

　　line81通過$event變量來獲取點擊的dom元素；

　　line82通過checkbox的當(dāng)前狀態(tài)來決定是add操作還是remove操作；

　　line83調(diào)用updateSelected方法，更新數(shù)據(jù)；

line86-88定義了isSelected方法，用來判斷ID為id的checkbox是否被選中，然后傳值給頁面的ng-checked指令；