Angular.JS判斷複選框checkbox是否選取並即時顯示-js教程-PHP中文網

Angular.JS判斷複選框checkbox是否選取並即時顯示

高洛峰

發布： 2016-12-03 13:32:32

原創

2158 人瀏覽過

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

Angular.JS判斷複選框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 class="brush:php;toolbar:false">{{selected|json}}

登入後複製

{{selectedTags|json}}

登入後複製

line2 定義了AngularJSAngularJSAngularJSSamic 引入腳本。的script2.js腳本；

line7 指定控制器AddStyleCtrl

line13-15 即時顯示已選標籤給使用者看；

line17-line26 使用雙重循環列出資料庫（本例中就儲存在了controller的一個物件裡）中的資料；

　　line21的這行程式碼作用可大了：

　　儲存了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 here
 
var iApp = angular.module("App", []);
 
 
 
iApp.controller(&#39;AddStyleCtrl&#39;, function($scope)
{
 $scope.tagcategories = [
  {
   id: 1,
   name: &#39;Color&#39;,
   tags: [
    {
     id:1,
     name:&#39;color1&#39;
    },
    {
     id:2,
     name:&#39;color2&#39;
    },
    {
     id:3,
     name:&#39;color3&#39;
    },
    {
     id:4,
     name:&#39;color4&#39;
    },
   ]
  },
  {
   id:2,
   name:&#39;Cat&#39;,
   tags:[
    {
     id:5,
     name:&#39;cat1&#39;
    },
    {
     id:6,
     name:&#39;cat2&#39;
    },
   ]
  },
  {
   id:3,
   name:&#39;Scenario&#39;,
   tags:[
    {
     id:7,
     name:&#39;Home&#39;
    },
    {
     id:8,
     name:&#39;Work&#39;
    },
   ]
  }
 ];
 
 $scope.selected = [];
 $scope.selectedTags = [];
 
 var updateSelected = function(action,id,name){
  if(action == &#39;add&#39; && $scope.selected.indexOf(id) == -1){
   $scope.selected.push(id);
   $scope.selectedTags.push(name);
  }
  if(action == &#39;remove&#39; && $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?&#39;add&#39;:&#39;remove&#39;);
  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：如果添加資料（id，name）；
　　line73-77：如果添加資料且操作且操作'陣列[id]' 元素存在，從陣列中刪除資料（id，name）；
line80-84定義了updateSelection方法，這個方法會在html頁面的checkbox被點擊時呼叫；
　　line81透過$event變數來取得點選的dom元素；
　　line82透過checkbox的目前狀態來決定是add操作還是remove操作；
　　line83呼叫updateSelected方法，更新資料；
line86-88定義了isSelected方法，用來判斷ID為id的checkID ，然後傳值給頁面的ng-checked指令；