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

2019-11-19 18:45:34

字體：大中小

來源：轉載

供稿：網友

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

看一下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 實時顯示已選標簽給用戶看；

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

　　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，點擊時候調用updateSelection($event,tag.id)方法；

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

line29-30 是測試時候給自己看的，可以看到selected數組和selectedTags數組中的內容；

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

/** * Created by zh on 20/05/15. */// Code goes herevar 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 定義了標簽對象

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

line68-78 定義了updateSelected方法，這個方法會被updateSelection調用；

　　line69-72：如果add操作且 ‘數組[id]' 元素不存在，向數組中添加數據（id，name）；

　　line73-77：如果remove操作且‘數組[id]' 元素存在，從數組中刪除數據（id，name）；

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

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

　　line82通過checkbox的當前狀態來決定是add操作還是remove操作；

　　line83調用updateSelected方法，更新數據；

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