Angularjs Full Select function implementation

Recently in a project to increase the full selection and anti-selection function, previously only have done the JQ version of the full selection and reverse selection.

Implementation Results :

1. Click the Select all checkbox to toggle Select All and empty all

2. Click the checkbox in the list, select all when all is selected

3. When you click the checkbox in the list to select it unchecked, the Select checkbox also becomes unchecked.

At first, I saw that the angular project would not be made after the whole selection.

Step One:

Then on the Internet to find information, found a very good demo, the results put it into the project when found that it can not achieve the needs of 2 and 3, then thought it was their own writing problems, and went to play the next demo, found that the demo can only achieve function 1.

Demo Address: Demo case

Lesson : After encountering the demo to all play before and then put in the project.

Step Two:

And then found a blog, this is the method inside can be perfect to achieve my needs. I used method 3 to put the validation in the project and put some of the code out here. In the project to replace the parameters according to the actual situation.

Blog Address: Success Stories Blog

Success Stories:

Html

<DivNg-controller= "Mycontroller">    <label for= "Flag">Select All<inputID= "Flag"type= "checkbox"Ng-model= "Select_all"Ng-change= "SelectAll ()">    </label>    <ul>        <Ling-repeat= "I in List">            <inputtype= "checkbox"Ng-model= "i.checked"Ng-change= "SelectOne ()">            <span>{{id}}</span>        </Li>    </ul></Div>

Angular

varApp = Angular.module (' myApp '), []); App.controller (' Mycontroller ', [' $scope ',function($scope) {$scope. List= [        {' ID ': 101},        {' ID ': 102},        {' ID ': 103},        {' ID ': 104},        {' ID ': 105},        {' ID ': 106},        {' ID ': 107}    ]; $scope. M= []; $scope. Checked= []; $scope. SelectAll=function () {        if($scope. Select_all) {$scope. Checked= []; Angular.foreach ($scope. List,function(i) {i.checked=true;            $scope. Checked.push (i.id); })        }Else{Angular.foreach ($scope. List,function(i) {i.checked=false; $scope. Checked= [];    })} console.log ($scope. checked);    }; $scope. SelectOne=function() {Angular.foreach ($scope. List,function(i) {varindex =$scope. Checked.indexof (i.id); if(i.checked && Index = = =-1) {$scope. Checked.push (i.id); } Else if(!i.checked && Index!==-1) {$scope. Checked.splice (Index,1);        }; })        if($scope. list.length = = =$scope. Checked.length) {$scope. Select_all=true; } Else{$scope. Select_all=false;    } console.log ($scope. checked); }}]);

Angularjs Full Select function implementation