Angular.js Determine if checkbox checkbox is checked and displayed in real time _angularjs

First take a look at the simple effect diagram, as follows:

Take a look at the HTML code:

<! DOCTYPE html>  

Line2 defines the Angularjs App;

Line4 introduces the Angularjs script;

Line5 introduces 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 it is stored in an object in controller);

LINE21 's line of code can be a big part of this.：<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">

Store the tag of the id,name, use isSelected(tag.id) to determine whether to be checked, click to call the updateSelection($event,tag.id) method;

If you want to ng-click the triggering function, the element that triggers the function cannot be passed in directly to this, and you need to pass in the event. Because in Angularjs, this place is an event. Because in Angularjs, this place is scope. We can pass in the event, then pass the event inside the function, and then event.target get the element through the function.

LINE29-30 is the test time to see for themselves, you can see the selected array and selectedtags array of content;

Then look at the Angularjs code: (script2.js)

/** * Created by en on 20/05/15.



*//Code goes here var 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) {$sco
   Pe.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 defines the angular app;

LINE10 defines the controller Addstylectrl;

LINE12-63 defines a Label object

Line64,66 declares two array objects in $scope (which can be merged into 1) to store tag IDs and name respectively;

Line68-78 defines the updateselected method, which is invoked by the updateselection;

LINE69-72: Add data to the array if the add operation and the ' array [id] ' element does not exist (Id,name);

LINE73-77: Delete data (Id,name) from the array if the remove operation and the ' array [id] ' element exist;

Line80-84 defines the Updateselection method, which is invoked when the checkbox of an HTML page is clicked;

Line81 through the $event variable to get the clicked DOM element;

The line82 determines whether the add or remove actions are made by the current state of the checkbox;

Line83 calls the Updateselected method to update the data;

Line86-88 defines the IsSelected method to determine whether a checkbox with ID ID is selected, and then passes the value to the page's ng-checked instruction;

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if there are questions to welcome the exchange of messages.

Author: zh Cheese--Zhang He
Q q:1203456195
Mailbox: cheesezh@163.com
Source: >http://www.cnblogs.com/cheesezh/