Angularjs Determine if the Checkbox/check box is selected and displayed in real time

Recently made a selection of the function of the label, put some tags to the user, users choose their favorite tags, similar to what we see on the shopping site of the filter tag like;

Simple Effect:

First look at the HTML code:

 1 <! DOCTYPE html> 2 
Line2 defines the Angularjs App;
Line4 Introduction of Angularjs script;
Line5 introduced its own written script2.js script;
LINE7 Specifies the controller Addstylectrl
Line13-15 real-time display of selected labels to the user to see;
Line17-line26 uses a double loop to list the data in the database (in this case, an object stored in the controller);
Line21 This line of code can be very useful: <input type= "checkbox" id={{tag.id}} name= "{{tag.name}}" ng-checked= "isSelected (tag.id)" ng-click= "updateselection ($event, tag.id)" >
Stored the tag of the id,name, using isselected (tag.id) to determine whether to be checked, click Time to call Updateselection ($event, Tag.id) method;
If you want the Ng-click trigger function to get to the element that triggered the function cannot pass directly to this, but need to pass inEVENT。BecauseForInANGULARJSInSurface， this   Ground  square  th< Span id= "mathjax-span-55" class= "mi" >is  Yes  Event Because in angularjs, this is the scope of this place. We can pass IN.EVENT，ThenAfter  letter  Number    Tong  over     event and then gets to that element through Event.target in the Function. 
LINE29-30 is the test time to yourself, you can see the selected array and the contents of the Selectedtags array;
Then look at the Angularjs code: (script2.js)
 1/** 2 * Created by en on 20/05/15. 3 */4//Code goes here 5 6 var iApp = Angular.module ("App", []); 7 8 9 Iapp.controller (' Addstylectrl ', function ($scope) One by one {$scope. tagcategories = [gb]                     d:1,15 name: ' Color ', tags: [+] id:1,19 Name: ' Color1 '},21 {id:2,23 name: ' Color2                 '},25 {id:3,27 name: ' Color3 ' 28             },29 {id:4,31 name: ' Color4 ' 32},33                     ]34},35 {id:2,37 name: ' Cat ', tags:[39 {40 id:5,41 name: ' cat1 '},43 {id : 6,45 name: ' CAT2 ' 46},47]48},49 {id:3,51 name: ' Scenario ', 52                 tags:[53 {id:7,55 name: ' Home ' 56},57         {id:8,59 name: ' work ' 60},61]62 }63];64 $scope. selected = [];66 $scope. selectedtags = [];67] var updateselected = function (action,id , Name) {if (action = = ' Add ' && $scope. selected.indexof (id) = =-1) {$scope. selected.push (id) ; $scope. Selectedtags.push (name);}73 if (action = = ' Remove ' && $scope. selected.ind             Exof (id)!=-1) {all var idx = $scope. selected.indexof (id); $scope. selected.splice (idx,1); 76         $scope. selectedtags.splice (idx,1),}78}79 $scope. updateselection = function ($event, id) {81 var checkbox = $event.target;82 var action = (checkbox.checked? ')         Add ': ' Remove '); updateselected (action,id,checkbox.name);}85 $scope. isSelected = function (id) {87 return $scope. selected.indexof (id) >=0;88}89});
Line6 defines the angular app;
LINE10 defines the controller addstylectrl;
LINE12-63 defines the Label object
Line64,66 declares the two array objects in the $scope (which can be combined into 1) to store the tag ID and name respectively;
line68-78 defines the updateselected method, which is called by updateselection;
Line69-72: add data to the array if the add operation and the ' array [id] ' element does not exist (id,name);
line73-77: if the remove operation and the ' array [id] ' element exists, Delete the data from the array (id,name);
line80-84 defines the updateselection method, which is invoked when the checkbox of an HTML page is clicked;
Line81 gets the clicked DOM element through the $event variable;
Line82 the current state of the checkbox to determine whether it is an add operation or a remove operation;
Line83 call the Updateselected method to update the data;
line86-88 defines the isselected method, which is used to determine whether a checkbox with ID ID is selected, and then passes the value to the ng-checked instruction of the page;
Angularjs Determine if the Checkbox/check box is selected and displayed in real time