以下是一个示例的解决方法,演示了如何使用AngularJS创建一个动态的多选框列表,并显示选中的数量。
HTML代码:
Total selected: {{selectedCount}}
JavaScript代码:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.items = [
{ name: 'Item 1', selected: false },
{ name: 'Item 2', selected: false },
{ name: 'Item 3', selected: false },
{ name: 'Item 4', selected: false }
];
$scope.selectedCount = 0;
$scope.updateSelected = function() {
$scope.selectedCount = $scope.items.filter(function(item) {
return item.selected;
}).length;
};
});
上述代码创建了一个AngularJS应用,并定义了一个名为myCtrl
的控制器。在控制器中,我们定义了一个items
数组,其中包含了多个对象,每个对象都代表一个选项,并具有一个selected
属性,用于表示该选项是否被选中。
在HTML中,我们使用ng-repeat
指令来循环遍历items
数组,并为每个选项创建一个复选框。复选框的ng-model
指令绑定到item.selected
属性,这样当复选框的状态发生变化时,item.selected
的值也会相应地更新。同时,我们使用ng-change
指令来监听复选框状态的变化,并调用updateSelected
函数来更新选中数量。
在控制器中,我们定义了一个名为updateSelected
的函数,用于计算选中的数量。我们使用filter
方法来过滤出items
数组中selected
属性为true
的选项,并使用length
属性获取选中的数量。最后,我们将选中的数量赋值给selectedCount
变量,在HTML中显示出来。
这样,当用户选中或取消选中复选框时,选中的数量会自动更新并显示出来。