I've been using a decorator directive to create a checkbox list that is based on this previous answer: How do I bind to list of checkbox values with AngularJS?
However, I want to add a "top-level" checkbox that toggles the selection of all checkboxes.
Is there a way to customise this directive to achieve this?
EDIT (I've included stripped down version of my code):
(function ()
{
var app = angular.module('editFormApp', ['centralCommunicationModule']);
app.directive('editForm', ['sharedProjectService', function (sharedProjectService) {
return {
restrict: 'A',
controller: ['$scope', '$http', '$filter', 'centralCommunicationService', function ($scope, $http, $filter, centralCommunicationService) {
$scope.checked_custGroupMembers = [];
$scope.reschedule = {};
// get reschedule object from server via service when id changes
$scope.$watch(function () { return sharedProjectService.rescheduleId }, function (newVal, oldVal) {
if (newVal != '') {
$scope.rescheduleId = newVal;
$http.get('/Reschedule/Get/', { params: { id: $scope.rescheduleId } }).success(function (data) {
var reschedule = angular.fromJson(data);
$scope.reschedule = reschedule;
});
}
});
}],
templateUrl: '/Forms/_AddEditForm' // MVC controller returning PartialView("~/Views/AngularTemplates/_AddEditForm.cshtml", model);
};
}]);
}
// declare directive in html
<div edit-form></div>
// template _AddEditForm.cshtml snippet below
<div ng-repeat="circulationMember in reschedule.CustGroupCirculationMembers">
<label>
<input name="custGroupMembers" type='checkbox' value="{{circulationMember.FullName}}" check-list='checked_custGroupMembers' id="{{circulationMember.Id}}" /> {{circulationMember.FullName}}
</label>
</div>
You could try do something like this, it's hard to answer completely without seeing some code
angular.module('change this to your module').config(function($provide) {
'use strict';
$provide.decorator('checkList', ['$delegate', function($delegate) {
var directive = $delegate[0];
directive.link = function(scope, elem, attrs) {
var invokes = angular.module('checklist')._invokeQueue,
result = [];
for(var i=0; i<invokes.length; i++) {
if(invokes[i][1] == "directive") {
result.push(invokes[i][2][0]);
}
}
for(var j=0; j<result.length; j++) {
// change checked for each one here
}
var handler = function(setup) {
var checked = elem.prop('checked');
var index = scope.list.indexOf(scope.value);
if (checked && index == -1) {
if (setup) elem.prop('checked', false);
else scope.list.push(scope.value);
} else if (!checked && index != -1) {
if (setup) elem.prop('checked', true);
else scope.list.splice(index, 1);
}
};
var setupHandler = handler.bind(null, true);
var changeHandler = handler.bind(null, false);
elem.bind('change', function() {
scope.$apply(changeHandler);
});
scope.$watch('list', setupHandler, true);
};
return $delegate;
}]);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.