所以我有以下指令:
app.directive('checklistModel', ['$parse', '$compile', function($parse, $compile) {
// contains
function contains(arr, item, comparator) {
if (angular.isArray(arr)) {
for (var i = arr.length; i--;) {
if (comparator(arr[i], item)) {
return true;
}
}
}
return false;
}
// add
function add(arr, item, comparator) {
arr = angular.isArray(arr) ? arr : [];
if(!contains(arr, item, comparator)) {
arr.push(item);
}
return arr;
}
// remove
function remove(arr, item, comparator) {
if (angular.isArray(arr)) {
for (var i = arr.length; i--;) {
if (comparator(arr[i], item)) {
arr.splice(i, 1);
break;
}
}
}
return arr;
}
// http://stackoverflow.com/a/19228302/1458162
function postLinkFn(scope, elem, attrs) {
// compile with `ng-model` pointing to `checked`
$compile(elem)(scope);
// getter / setter for original model
var getter = $parse(attrs.checklistModel);
var setter = getter.assign;
var checklistChange = $parse(attrs.checklistChange);
// value added to list
var value = $parse(attrs.checklistValue)(scope.$parent);
var comparator = angular.equals;
if (attrs.hasOwnProperty('checklistComparator')){
comparator = $parse(attrs.checklistComparator)(scope.$parent);
}
// watch UI checked change
scope.$watch('checked', function(newValue, oldValue) {
if (newValue === oldValue) {
return;
}
var current = getter(scope.$parent);
if (newValue === true) {
setter(scope.$parent, add(current, value, comparator));
} else {
setter(scope.$parent, remove(current, value, comparator));
}
if (checklistChange) {
checklistChange(scope);
}
});
// declare one function to be used for both $watch functions
function setChecked(newArr, oldArr) {
scope.checked = contains(newArr, value, comparator);
}
// watch original model change
// use the faster $watchCollection method if it's available
if (angular.isFunction(scope.$parent.$watchCollection)) {
scope.$parent.$watchCollection(attrs.checklistModel, setChecked);
} else {
scope.$parent.$watch(attrs.checklistModel, setChecked, true);
}
}
return {
restrict: 'A',
priority: 1000,
terminal: true,
scope: true,
compile: function(tElement, tAttrs) {
if (tElement[0].tagName !== 'INPUT' || tAttrs.type !== 'checkbox') {
throw 'checklist-model should be applied to `input[type="checkbox"]`.';
}
if (!tAttrs.checklistValue) {
throw 'You should provide `checklist-value`.';
}
// exclude recursion
tElement.removeAttr('checklist-model');
// local scope var storing individual checkbox model
tElement.attr('ng-model', 'checked');
return postLinkFn;
}
};
}]);
它的基本功能是它允许我创建以下内容:
<label class="i-checks">
<input type="checkbox" checklist-model="selectedUsers" class="userChecker"
data-checklist-value="user">
<i></i>
</label>
基本上,当单击某个复选框时,该项目将被添加到单独的列表中,在这种情况下,object
user
会添加到列表selectedUsers
现在我正在创建一个看起来像这样的select all
函数:
scope.selectAll = function () {
var filteredItems = $filter('filter')(scope.uninvitedList, scope.search);
if (!scope.checkAll) {
scope.selectedUsers = [];
}
else {
scope.selectedUsers = filteredItems;
}
};
这使我能够选择所有可见元素
一旦我按下它,它会正确地将所有用户添加到列表中并检查所有复选框。我再次点击它,它将它设置为一个空数组,但有一个问题:
答案 0 :(得分:1)
在dot-rule
范围变量上看起来像selectedUsers
个问题。请查看此SO question以了解我的意思。
在演示中,我使用selection.selectedUsers
进行双向绑定。
请查看下面的工作演示或此jsfiddle。
angular.module('demoApp', [])
.controller('mainController', function($scope, $timeout) {
$scope.users = [{
id: 0,
name: 'John'
}, {
id: 1,
name: 'Jane'
}];
$scope.selection = {
selectedUsers: [$scope.users[0]]
}; //[$scope.users[0]];
$scope.selectAll = function() {
//console.log($scope.checkAll);
$scope.selection.selectedUsers = $scope.checkAll ?
angular.copy($scope.users) : [];
}
})
.directive('checklistModel', ['$parse', '$compile',
function($parse, $compile) {
// contains
function contains(arr, item, comparator) {
if (angular.isArray(arr)) {
for (var i = arr.length; i--;) {
if (comparator(arr[i], item)) {
return true;
}
}
}
return false;
}
// add
function add(arr, item, comparator) {
arr = angular.isArray(arr) ? arr : [];
if (!contains(arr, item, comparator)) {
arr.push(item);
}
return arr;
}
// remove
function remove(arr, item, comparator) {
if (angular.isArray(arr)) {
for (var i = arr.length; i--;) {
if (comparator(arr[i], item)) {
arr.splice(i, 1);
break;
}
}
}
return arr;
}
// https://stackoverflow.com/a/19228302/1458162
function postLinkFn(scope, elem, attrs) {
// compile with `ng-model` pointing to `checked`
$compile(elem)(scope);
// getter / setter for original model
var getter = $parse(attrs.checklistModel);
var setter = getter.assign;
var checklistChange = $parse(attrs.checklistChange);
// value added to list
var value = $parse(attrs.checklistValue)(scope.$parent);
var comparator = angular.equals;
if (attrs.hasOwnProperty('checklistComparator')) {
comparator = $parse(attrs.checklistComparator)(scope.$parent);
}
// watch UI checked change
scope.$watch('checked', function(newValue, oldValue) {
if (newValue === oldValue) {
return;
}
var current = getter(scope.$parent);
if (newValue === true) {
setter(scope.$parent, add(current, value, comparator));
} else {
setter(scope.$parent, remove(current, value, comparator));
}
if (checklistChange) {
checklistChange(scope);
}
});
// declare one function to be used for both $watch functions
function setChecked(newArr, oldArr) {
scope.checked = contains(newArr, value, comparator);
}
// watch original model change
// use the faster $watchCollection method if it's available
if (angular.isFunction(scope.$parent.$watchCollection)) {
scope.$parent.$watchCollection(attrs.checklistModel, setChecked);
} else {
scope.$parent.$watch(attrs.checklistModel, setChecked, true);
}
}
return {
restrict: 'A',
priority: 1000,
terminal: true,
scope: true,
compile: function(tElement, tAttrs) {
if (tElement[0].tagName !== 'INPUT' || tAttrs.type !== 'checkbox') {
throw 'checklist-model should be applied to `input[type="checkbox"]`.';
}
if (!tAttrs.checklistValue) {
throw 'You should provide `checklist-value`.';
}
// exclude recursion
tElement.removeAttr('checklist-model');
// local scope var storing individual checkbox model
tElement.attr('ng-model', 'checked');
return postLinkFn;
}
};
}
]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<h3>
Directive
</h3>
<input type="checkbox" ng-model="checkAll" ng-change="selectAll()" />check all
<div ng-repeat="user in users">
<label class="i-checks">
<input type="checkbox" checklist-model="selection.selectedUsers" class="userChecker" data-checklist-value="user">{{user.name}}
</label>
</div>
<pre>
Debugging models here:
selectedUsers:
{{selection.selectedUsers | json : 2}}
user model:
{{users | json: 2}}
</pre>
</div>
&#13;