I want to hide rows of data with a specific class when a checkbox is selected.
|
1 2 3 |
Value1: <input type="checkbox" ng-model="value1"> |
So now when it’s ticked value1 is true, as per the official angular api docs. http://jsfiddle.net/s23eW/
Angularjs ng-show based on variable is as simple as this:
|
1 2 3 |
<li ng-repeat="u in users" ng-show="u.role == 'admin'"> ... </li> |
But now to link this to the checkbox aswell in an expression it would look like this:
|
1 2 3 |
<li ng-repeat="u in users" ng-hide="(showAdminUsers == false && u.role == 'admin')"> ... </li> |
Changing the ng-show to ng-hide and adding in the $scope variable check (which is mapped to the checkbox using ng-model) we can get the desired results.
.png)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div ng-app="App"> <div ng-controller="Ctrl"> <form name="myForm">Show admins: <input type="checkbox" ng-model="showAdminUsers" /> {{ showAdminUsers }} </form> <ul> <li ng-repeat="u in users" ng-hide="(showAdminUsers == false && u.role == 'admin')">{{ u.username }} ({{ u.role }})</li> </ul> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
angular.module('App', []); function Ctrl($scope) { $scope.showAdminUsers = true; $scope.users = [{ "id": 1, "username": "sam", "role": "user" }, { "id": 2, "username": "admin1", "role": "admin" }, { "id": 3, "username": "admin2", "role": "admin" }, { "id": 4, "username": "user1", "role": "user" }, { "id": 5, "username": "user2", "role": "user" }, { "id": 6, "username": "user3", "role": "user" }]; } |