Angular.JS determines whether the checkbox is selected and displays it in real time-JS Tutorial-php.cn

Angular.JS determines whether the checkbox is selected and displays it in real time

高洛峰

Release： 2016-12-03 13:32:32

Original

2200 people have browsed it

First, let’s take a look at the simple rendering, as shown below:

Angular.JS determines whether the checkbox is selected and displays it in real time

Look at the html code:

<!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}}

Copy after login

{{selectedTags|json}}

Copy after login

line2 defines the AngularJS App;

line4 introduces the angularjs script;

line5 introduces your own writing script2.js script;

line7 specifies the controller AddStyleCtrl

line13-15 displays the selected tags to the user in real time;

line17-line26 uses a double loop to list the database (in this case, it is stored in an object of the controller );

This line of code in line21 is very useful:

　The id and name of the tag are stored. Use isSelected(tag.id) to determine whether it is checked or not when clicked. Call the updateSelection($event,tag.id) method;

　If you want to get the element that triggered the function in the function triggered by ng-click, you cannot directly pass in this, but you need to pass in event. Because in Angularjs, this here is event. Because in Angularjs, this here is scope. We can pass in event, then pass event in the function, and then pass event.target in the function to get the element.

line29-30 is for myself when testing. You can see the contents of the selected array and selectedTags array;

Then look at the AngularJS code: (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;
 }
});

Copy after login

line6 defines angular app;
line10 defines Controller AddStyleCtrl;
line12-63 defines the tag object
line64, 66 declares two array objects in $scope (can be combined into one), which are used to store the tag's id and name respectively;
line68-78 definition The updateSelected method will be called by updateSelection;
Line69-72: If the add operation and the 'array [id]' element does not exist, add data (id, name) to the array;
Line73-77: If the remove operation and 'Array[id]' element exists, delete data (id, name) from the array;
line80-84 defines the updateSelection method, which will be called when the checkbox of the html page is clicked;
line81 is obtained through the $event variable The clicked dom element;
Line82 determines whether the add operation or remove operation is based on the current status of the checkbox;
Line83 calls the updateSelected method to update the data;
line86-88 defines the isSelected method to determine whether the checkbox with ID id is selected. , and then pass the value to the ng-checked directive of the page;