AngularJS判断checkbox/复选框是否选中

浏览数：268 / 时间：2015年06月09日

html代码：

 1 <!DOCTYPE html>
 2 <html data-ng-app="App">
 3 <head>
 4     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 5     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 6     <script src="script2.js"></script>
 7 </head>
 8 
 9 <body data-ng-controller="AddStyleCtrl">
10 
11 
12 
13     <div class="row">
14         <button class="col-xs-3" ng-click="closeChooseTagsModal()">Back</button>
15         <div class="col-xs-6">Choose Tags</div>
16         <button class="col-xs-3" ng-click="finishChooseTags()">Finish</button>
17     </div>
18     <div >
19         <div class="col-xs-12">
20             <div>You have choosen:</div>
21 
22             <label data-ng-repeat="selectedTag in selectedTags">
23                 (({{selectedTag}}))
24             </label>
25         </div>
26         <div class="col-xs-12" data-ng-repeat="category in tagcategories">
27             <div class="row">{{ category.name }}</div>
28             <div data-ng-repeat="tag in category.tags">
29                 <div class="col-xs-4">
30                     <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
31                     {{ tag.name }}
32                 </div>
33             </div>
34         </div>
35         <button class="col-xs-12" ng-click="finishChooseTags()">Finish</button>
36     </div>
37 
38 <!--<pre>{{selected|json}}</pre>-->
39 <!--<pre>{{selectedTags|json}}</pre>-->
40 
41 </body>
42 
43 </html>

js代码：（script2.js）

 1 /**
 2  * Created by zh on 20/05/15.
 3  */
 4 // Code goes here
 5 
 6 var iApp = angular.module("App", []);
 7 
 8 
 9 
10 iApp.controller(‘AddStyleCtrl‘, function($scope)
11 {
12     $scope.tagcategories = [
13         {
14             id: 1,
15             name: ‘Color‘,
16             tags: [
17                 {
18                     id:1,
19                     name:‘color1‘
20                 },
21                 {
22                     id:2,
23                     name:‘color2‘
24                 },
25                 {
26                     id:3,
27                     name:‘color3‘
28                 },
29                 {
30                     id:4,
31                     name:‘color4‘
32                 },
33             ]
34         },
35         {
36             id:2,
37             name:‘Cat‘,
38             tags:[
39                 {
40                     id:5,
41                     name:‘cat1‘
42                 },
43                 {
44                     id:6,
45                     name:‘cat2‘
46                 },
47             ]
48         },
49         {
50             id:3,
51             name:‘Scenario‘,
52             tags:[
53                 {
54                     id:7,
55                     name:‘Home‘
56                 },
57                 {
58                     id:8,
59                     name:‘Work‘
60                 },
61             ]
62         }
63     ];
64 
65     $scope.selected = [];
66     $scope.selectedTags = [];
67 
68     var updateSelected = function(action,id,name){
69         if(action == ‘add‘ && $scope.selected.indexOf(id) == -1){
70             $scope.selected.push(id);
71             $scope.selectedTags.push(name);
72         }
73         if(action == ‘remove‘ && $scope.selected.indexOf(id)!=-1){
74             var idx = $scope.selected.indexOf(id);
75             $scope.selected.splice(idx,1);
76             $scope.selectedTags.splice(idx,1);
77         }
78     }
79 
80     $scope.updateSelection = function($event, id){
81         var checkbox = $event.target;
82         var action = (checkbox.checked?‘add‘:‘remove‘);
83         updateSelected(action,id,checkbox.name);
84     }
85 
86     $scope.isSelected = function(id){
87         return $scope.selected.indexOf(id)>=0;
88     }
89 });