Angular material checkbox - 添加功能到 ng-checked
Angular material checkbox - add function to ng-checked
我正在使用 <md-checkbox>
和 Angular Material 提供的 'indeterminate' attribute
来根据选中的复选框更新数组。但是,数组仅基于 ng-click 更新,而不是基于 ng-change 更新。因此,检查 "Select All" 项不会将值插入到数组中。
考虑这个 codepen。
如何根据 ng-change 更新 addData function
?
ng-change
确实需要 ng-model
但您实际上只需要一个模型用于此示例
- 你有 3 个数组,基本上包含相同的项目,你可以只用一个
- 在每个项目上添加
selected
属性 并将其用作模型
- 使用 https://docs.angularjs.org/api/ng/filter/filter
筛选 selected
项目的数组
控制器:
controller('AppCtrl', function($scope, $filter) {
$scope.items = [{num: 1},{num: 2}, {num: 3}, {num: 4},{num: 5}];
$scope.isIndeterminate = function() {
var selected = $filter('filter')($scope.items, {selected: true}).length;
console.log(selected);
return selected !== 0 && selected !== $scope.items.length;
};
$scope.allChecked = function() {
return $filter('filter')($scope.items, {selected: true}).length === $scope.items.length;
};
$scope.toggleAll = function() {
var selected = $filter('filter')($scope.items, {selected: true}).length;
var newSelected = selected < $scope.items.length;
angular.forEach($scope.items, function(item) {
item.selected = newSelected;
});
};
});
标记:
<div>
<fieldset class="demo-fieldset">
<legend class="demo-legend">Using
<md-checkbox> with the 'indeterminate' attribute </legend>
<div layout="row" layout-wrap="" flex="">
<div flex-xs="" flex="50">
<md-checkbox aria-label="Select All" md-indeterminate="isIndeterminate()" ng-click="toggleAll()" ng-checked="allChecked()">
<span ng-if="isChecked()">Un-</span>Select All
</md-checkbox>
</div>
<div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
<md-checkbox ng-model="item.selected">
{{ item.num }}
</md-checkbox>
</div>
</div>
</fieldset>
<div ng-repeat="data in items | filter: {selected: true}" style="display: inline-block">
{{data.num}},
</div>
</div>
我正在使用 <md-checkbox>
和 Angular Material 提供的 'indeterminate' attribute
来根据选中的复选框更新数组。但是,数组仅基于 ng-click 更新,而不是基于 ng-change 更新。因此,检查 "Select All" 项不会将值插入到数组中。
考虑这个 codepen。
如何根据 ng-change 更新 addData function
?
ng-change
确实需要ng-model
但您实际上只需要一个模型用于此示例- 你有 3 个数组,基本上包含相同的项目,你可以只用一个
- 在每个项目上添加
selected
属性 并将其用作模型 - 使用 https://docs.angularjs.org/api/ng/filter/filter 筛选
selected
项目的数组
控制器:
controller('AppCtrl', function($scope, $filter) {
$scope.items = [{num: 1},{num: 2}, {num: 3}, {num: 4},{num: 5}];
$scope.isIndeterminate = function() {
var selected = $filter('filter')($scope.items, {selected: true}).length;
console.log(selected);
return selected !== 0 && selected !== $scope.items.length;
};
$scope.allChecked = function() {
return $filter('filter')($scope.items, {selected: true}).length === $scope.items.length;
};
$scope.toggleAll = function() {
var selected = $filter('filter')($scope.items, {selected: true}).length;
var newSelected = selected < $scope.items.length;
angular.forEach($scope.items, function(item) {
item.selected = newSelected;
});
};
});
标记:
<div>
<fieldset class="demo-fieldset">
<legend class="demo-legend">Using
<md-checkbox> with the 'indeterminate' attribute </legend>
<div layout="row" layout-wrap="" flex="">
<div flex-xs="" flex="50">
<md-checkbox aria-label="Select All" md-indeterminate="isIndeterminate()" ng-click="toggleAll()" ng-checked="allChecked()">
<span ng-if="isChecked()">Un-</span>Select All
</md-checkbox>
</div>
<div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
<md-checkbox ng-model="item.selected">
{{ item.num }}
</md-checkbox>
</div>
</div>
</fieldset>
<div ng-repeat="data in items | filter: {selected: true}" style="display: inline-block">
{{data.num}},
</div>
</div>