Как я могу получить флажки angular.js с выбором / отменой выбора всех функций и неопределенных значений?
Я ищу что-то в точности как эти (флажки с тремя состояниями с "родителями"). Но использование этого решения не будет элегантным, так как сейчас я не зависим от jQuery, и мне нужно будет вызвать $scope.$ Apply, чтобы модель распознала автоматически (не) отмеченный флажок jQuery clicked.
Вот ошибка для angular.js, которая запрашивает реализованное значение ng-indeterminate-value. Но это все равно не дало бы мне синхронизацию со всеми детьми, и я не думаю, что это должно быть частью моего контроллера.
То, что я ищу, будет примерно таким:
- Директива "ng-children-model" с таким синтаксисом, как:
<input type="checkbox" ng-children-model="child.isSelected for child in listelements">, Список логических значений будет вычислен, и если выбрано 0 -> флажок false. Если все выбрано -> флажок true. Остальное -> флажок не определен. - В моем контроллере у меня было бы что-то вроде этого:
$scope.listelements = [{isSelected: true, desc: "Donkey"},{isSelected: false, desc: "Horse"}] - Флажки будут сделаны как обычно с
<tr ng-repeat="elem in listelements"><td><input type="checkbox" ng-model="elem.isSelected"></td><td>{{elem.desc}}</td></tr>, - Насколько я понимаю, браузер определит, в какое состояние установлен флажок неопределенного клика.
8 ответов
Поскольку вам нужен новый тип / вид компонента, это звучит как хороший пример для пользовательской директивы.
Поскольку флажок parent/master/tri-Statement и отдельные флажки двойного состояния должны взаимодействовать друг с другом, я предлагаю одну директиву со своим собственным контроллером для обработки логики.
<tri-state-checkbox checkboxes="listelements"></tri-state-checkbox>
Директива:
app.directive('triStateCheckbox', function() {
return {
replace: true,
restrict: 'E',
scope: { checkboxes: '=' },
template: '<div><input type="checkbox" ng-model="master" ng-change="masterChange()">'
+ '<div ng-repeat="cb in checkboxes">'
+ '<input type="checkbox" ng-model="cb.isSelected" ng-change="cbChange()">{{cb.desc}}'
+ '</div>'
+ '</div>',
controller: function($scope, $element) {
$scope.masterChange = function() {
if($scope.master) {
angular.forEach($scope.checkboxes, function(cb, index){
cb.isSelected = true;
});
} else {
angular.forEach($scope.checkboxes, function(cb, index){
cb.isSelected = false;
});
}
};
var masterCb = $element.children()[0];
$scope.cbChange = function() {
var allSet = true, allClear = true;
angular.forEach($scope.checkboxes, function(cb, index){
if(cb.isSelected) {
allClear = false;
} else {
allSet = false;
}
});
if(allSet) {
$scope.master = true;
masterCb.indeterminate = false;
}
else if(allClear) {
$scope.master = false;
masterCb.indeterminate = false;
}
else {
$scope.master = false;
masterCb.indeterminate = true;
}
};
$scope.cbChange(); // initialize
},
};
});
Измените шаблон в соответствии со своими потребностями или используйте внешний шаблон с templateUrl.
Директива предполагает, что массив checkboxes содержит объекты, которые имеют isSelected собственность и desc имущество.
Обновление: если вы предпочитаете, чтобы директива отображала только три заявленных флажка, следовательно, отдельные флажки находятся в HTML (как решение @Piran), вот еще один вариант плунжера для этого. Для этого плунжера HTML будет:
<tri-state-checkbox checkboxes="listelements" class="select-all-cb">
</tri-state-checkbox>select all
<div ng-repeat="item in listelements">
<input type="checkbox" ng-model="item.isSelected"> {{item.desc}}
</div>
Я думаю, что пример решения, которое вы даете, помещает слишком много кода в контроллер. Контроллер должен действительно беспокоиться только о списке, а HTML/ директивы должны обрабатывать отображение (включая отображение флажка "Выбрать все"). Кроме того, все изменения состояния осуществляются через модель, а не путем написания функций.
Я собрал решение для Plunker: http://plnkr.co/edit/gSeQL6XPaMsNSnlXwgHt?p=preview
Теперь контроллер просто устанавливает список:
app.controller('MainCtrl', function($scope) {
$scope.list = [{
isSelected: true,
desc: "Donkey"
}, {
isSelected: false,
desc: "Horse"
}];
});
и представление просто выдает это:
<div ng-repeat="elem in list">
<input type="checkbox" ng-model="elem.isSelected" /> {{elem.desc}}
</div>
Для флажка "Выбрать все" я создал новую директиву под названием checkbox-all:
<input checkbox-all="list.isSelected" /> Select All
И это все, что касается использования, что, надеюсь, просто... кроме написания этой новой директивы:
app.directive('checkboxAll', function () {
return function(scope, iElement, iAttrs) {
var parts = iAttrs.checkboxAll.split('.');
iElement.attr('type','checkbox');
iElement.bind('change', function (evt) {
scope.$apply(function () {
var setValue = iElement.prop('checked');
angular.forEach(scope.$eval(parts[0]), function (v) {
v[parts[1]] = setValue;
});
});
});
scope.$watch(parts[0], function (newVal) {
var hasTrue, hasFalse;
angular.forEach(newVal, function (v) {
if (v[parts[1]]) {
hasTrue = true;
} else {
hasFalse = true;
}
});
if (hasTrue && hasFalse) {
iElement.attr('checked', false);
iElement.addClass('greyed');
} else {
iElement.attr('checked', hasTrue);
iElement.removeClass('greyed');
}
}, true);
};
});
parts переменная ломает list.isSelected на две части, чтобы я мог получить значение list из объема, isSelected свойство в каждом объекте.
Я добавляю type="checkbox" свойство элемента input, что делает его реальным флажком для браузера. Это означает, что пользователь может щелкнуть по нему, перейти к нему и т. Д.
Я связываю на onchange событие, а не onclick, поскольку флажок может быть изменен многими способами, в том числе с помощью клавиатуры. Событие onchange выполняется внутри scope.$apply() чтобы гарантировать, что изменения модели будут обработаны в конце.
Наконец-то я $watch модель ввода для изменения флажка (последний true позволяет мне смотреть сложные объекты). Это означает, что если флажки изменены пользователем или по какой-либо другой причине, флажок Выбрать все всегда будет синхронизирован. Это намного лучше, чем писать много обработчиков ng-click.
Если флажки установлены и не отмечены, тогда я устанавливаю основной флажок на флажок и добавляю стиль "серый" (см. style.css). Этот стиль CSS в основном устанавливает непрозрачность на 30%, заставляя флажок казаться серым, но он по-прежнему кликабелен; Вы также можете перейти к нему и использовать пробел, чтобы изменить его значение.
Я тестировал в Firefox, Chrome и Safari, но у меня нет IE в руках. Надеюсь, это работает для вас.
Вот улучшенная версия решения Пирана. С помощью .prop() вместо .attr() исправляет checked вопрос.
Использование:
<div ng-repeat="elem in list">
<input type="checkbox" ng-model="elem.isSelected" /> {{elem.desc}}
</div>
<ui-select-all items="list" prop="isSelected"></ui-select-all> Select all
Я считаю, что вы должны создавать директиву только в том случае, если вам нужно всего лишь выполнить какую-то манипуляцию с DOM или хотите абстрагировать много манипулятивного поведения DOM в "повторно используемый" компонент.
Вот решение, которое позволяет добиться того же, что вы пытались сделать, но это делает только логику в контроллерах... Если вы хотите сохранить контроль над контроллерами, то вы можете оттолкнуть всю эту логику в эксплуатацию... A Сервис также будет хорошим местом для этого, если вы хотите использовать его в нескольких местах.
http://plnkr.co/edit/hNTeZ8Tuht3T9NuY7HRi?p=preview
Обратите внимание, что в контроллере нет манипуляций с DOM. Мы достигаем того эффекта, который нам требуется, используя набор директив, которые предоставляются в Angular. Никаких новых директив не требуется. Я действительно не думаю, что вы должны использовать директиву для абстрагирования логики.
Надеюсь это поможет..
Если вы не можете предположить, что ng-модель назначена булевой модели (например, Y/N, '0'/'1') и / или вы предпочитаете иметь собственную разметку, подход, который использует возможности ngModel, и делает нет предположения о структуре HTML лучше, ИМХО.
Пример: http://plnkr.co/edit/mZQBizF72pxp4BvmNjmj?p=preview
Пример использования:
<fieldset indeterminate-group>
<legend>Checkbox Group</legend>
<input type="checkbox" name="c0" indeterminate-cue> Todos <br>
<input type="checkbox" name="c1" ng-model="data.c1" ng-true-value="'Y'" ng-false-value="'F'" indeterminate-item> Item 1 <br>
<input type="checkbox" name="c2" ng-model="data.c2" ng-true-value="'Y'" ng-false-value="'F'" indeterminate-item> Item 2 <br>
<input type="checkbox" name="c3" ng-model="data.c3" ng-true-value="'Y'" ng-false-value="'F'" indeterminate-item> Item 3 <br>
</fieldset>
Директива (основные части):
angular.module('app', [])
.directive('indeterminateGroup', function() {
function IndeterminateGroupController() {
this.items = [];
this.cueElement = null;
}
...
function setAllValues(value) {
if (this.inChangeEvent) return;
this.inChangeEvent = true;
try {
this.items.forEach(function(item) {
item.$setViewValue(value);
item.$render();
});
} finally {
this.inChangeEvent = false;
}
}
return {
restrict: "A",
controller: IndeterminateGroupController,
link: function(scope, element, attrs, ctrl) {
ctrl.inputChanged = function() {
var anyChecked = false;
var anyUnchecked = false;
this.items.forEach(function(item) {
var value = item.$viewValue;
if (value === true) {
anyChecked = true;
} else if (value === false) {
anyUnchecked = true;
}
});
if (this.cueElement) {
this.cueElement.prop('indeterminate', anyChecked && anyUnchecked);
this.cueElement.prop('checked', anyChecked && !anyUnchecked);
}
};
}
};
})
.directive('indeterminateCue', function() {
return {
restrict: "A",
require: '^^indeterminateGroup',
link: function(scope, element, attrs, indeterminateGroup) {
indeterminateGroup.addCueElement(element);
var inChangeEvent = false;
element.on('change', function(event) {
if (event.target.checked) {
indeterminateGroup.checkAll();
} else {
indeterminateGroup.uncheckAll();
}
});
}
};
})
.directive('indeterminateItem', function() {
return {
restrict: "A",
require: ['^^indeterminateGroup', 'ngModel'],
link: function(scope, element, attrs, ctrls) {
var indeterminateGroup = ctrls[0];
var ngModel = ctrls[1];
indeterminateGroup.addItem(ngModel);
ngModel.$viewChangeListeners.push(function() {
indeterminateGroup.inputChanged();
});
}
};
});
Модель:
// Bring your own model
СДЕЛАТЬ:
- избавиться от item.$render() внутри контроллера главной директивы;
- дать лучшее название директиве;
- упростить использование этой директивы в нескольких столбцах таблицы.
Я думаю, что это может быть решено путем сочетания угловых с JavaScript:
<div>
<input type="checkbox" id="select-all" name="selectAll" value="" ng-click="checkAll($event)" />
<div >
<input type="checkbox" name="childCheckbox" value="" />
<input type="checkbox" name="childCheckbox" value="" />
<input type="checkbox" name="childCheckbox" value="" />
<input type="checkbox" name="childCheckbox" value="" />
<input type="checkbox" name="childCheckbox" value="" />
<input type="checkbox" name="childCheckbox" value="" />
</div>
</div>
в checkAll() следующая логика сделает работу
$scope.checkAll = function (source) {
checkboxes = document.getElementsByName('childCheckbox');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.originalEvent.srcElement.checked;
}
Переписать использование Plnker для улучшения кода без использования ресурсов ForEach и некоторых других сложных вещей:
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.listelements = [{
isSelected: true,
desc: "Donkey"
}, {
isSelected: false,
desc: "Horse"
}];
});
app.directive('triStateCheckbox', function() {
return {
replace: true,
restrict: 'E',
scope: {
checkboxes: '='
},
template: '<input type="checkbox" ng-model="master" ng-change="masterChange()">',
controller: function($scope, $element) {
$scope.masterChange = function() {
for(i=0;i<$scope.checkboxes.length; i++)
$scope.checkboxes[i].isSelected=$scope.master;
};
$scope.$watch('checkboxes', function() {
var set=0;
for (i=0;i<$scope.checkboxes.length;i++)
set += $scope.checkboxes[i].isSelected?1:0;
$element.prop('indeterminate', false);
$scope.master = (set === 0) ? false : true;
if (set > 0 && set < i) {
$scope.master = false;
$element.prop('indeterminate', true);
}
}, true);
}
};
});
Plunker
"use strict";
var module = angular.module("myapp", []);
function Ctrl($scope) {
var element = $("#select_all");
$scope.$watch("$scope.isgreyed", $scope.fun = function() {
element.prop("indeterminate", $scope.isgreyed);
});
$scope.list = [{
isSelected: true,
desc: "Donkey"
}, {
isSelected: false,
desc: "Horse"
}]
$scope.isgreyed = true;
$scope.master = false;
$scope.onmasterclick = function() {
$scope.list.map(function(v) {
v.isSelected = $scope.master
})
}
$scope.oncheckboxclick = function() {
if ($('.select_one:checked').length === 0) {
$scope.isgreyed = false;
$scope.master = false;
} else if ($('.select_one:not(:checked)').length === 0) {
$scope.isgreyed = false;
$scope.master = true;
} else {
$scope.isgreyed = true;
}
$scope.fun();
}
}
HTML:
<div ng-controller="Ctrl">
<table>
<tr>
<td>
<input type="checkbox" id="select_all" ng-model="master" ng-click="onmasterclick()">
</td>
</tr>
<tr ng-repeat="elem in list">
<td>
<input ng-click="oncheckboxclick(elem)" class="select_one" type="checkbox" ng-model="elem.isSelected">
</td>
<td>{{elem.desc}}</td>
</tr>
</table>
</div>
Да, это некрасиво.