I'm working on a project that involves managing elements with checkboxes. I recently added a "checkAll" button to help select all elements at once.
http://example.com/jsbin1 (edit)
Any tips on enhancing user interface and ensuring only visible elements are selected when clicking the "checkAll" button?
Here's my workflow:
- Add filter option (hide elements with display:none; shows list 2)
- Click on checkAll checkbox
- Clear filter
- View only checked items from list1
Here is a snippet of my HTML code:
<div ng-app="listsModule">
<div ng-controller="listsController">
<input type="text" id="filter_lists" ng-model="search" placeholder="Search a list">
<table>
<thead>
<tr>
<th><input type="checkbox" ng-model="checkAll"/></th>
<th>List name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="list in lists | filter:search | orderBy:'name'">
<td><input type="checkbox" ng-model="list.isSelected" ng-checked="checkAll"></td>
<td>{{ list.name }}</td>
<td>{{ list.isSelected }}</td>
</tr>
</tbody>
</table>
</div>
</div>
And here is my JavaScript code:
var app = angular.module('listsModule', []);
app.controller('listsController', function ($scope) {
$scope.lists = [
{"id": 39, "name": "list1", "isSelected": false},
{"id": 40, "name": "list2", "isSelected": false}
]
});