Before in Baidu to find a lot about using Angularjs to implement CheckBox full selection function, but can only complete a part of the function, the following will be required to list the following features:
1, all please select the checkbox is selected, the above selection is also selected.
2, if one is not selected, select all cancellation.
3. Click the View button to see what the selected name is.
Find a lot of information on the Internet, found that a lot of is only to achieve the first 2 functions, but also a little more complex, and finally on the API check with ngchecked This instruction can be easily implemented this function. The code is as follows
Html:
<div Ng-controller = ' Myctrl ' >
<button ng-click= "checkstatus ()" > View </button>
<input Type = "checkbox" ng-model= "SelectAll" ng-checked= "select" ng-click= "Changeall ()"/> Select All/deselect all <br/>
< Table width= "50%" >
<thead>
<tr>
<th> Please select </th> <th>
name </th>
<th> Birthdays </th>
</tr>
</thead>
<tbody>
<tr ng-repeat= "obj in List ">
<td>
<input type =" checkbox "ng-checked=" SelectAll "ng-click=" Funcchange () "Ng-model=" Obj.isselected "/>
</td>
<td>{{obj.name}}</td>
<td>{{obj.birthday}}" </td>
</tr>
</tbody>
</table>
</div>
Js:
<script> var app = Angular.module ("myApp", [' ng ']); App.controller (' Myctrl ', function ($scope) {$scope. List = [{name: ' Golde ', Birthday: ' 2000-01-10 ', isselected: False}, {name: ' King ', Birthday: ' 1990-01-10 ', isselected:false}, {name: ' Mark ', Birthday: ' 19890-01-10 ', isselect
Ed:false}, {name: ' Marie ', Birthday: ' 2010-01-10 ', isselected:false}];
$scope. checkstatus = function () {var str = ';
Angular.foreach ($scope. List,function (Value,key) {if (value.isselected) {str = value.name+ "was selected \ n";
}
});
if (str = = ') {str = ' is not selected ';
alert (str);
}; When an object is operated (clicked), it executes funcchange///IsSelected whether the object is true or false in the array of objects, and determines whether the select is True $scope. Changeall = f
Unction () {//Select all/Deselect all Angular.foreach ($scope. List,function (v,k) {v.isselected = $scope. SelectAll;
})
};
$scope. Funcchange = function () {//when all is selected $scope. select = True;
Angular.foreach ($scope. List,function (v,k) {$scope. select = $scope. Select && v.isselected;
});
};
}); </script>
We can try this method.