Question

我正在尝试在加载时选择其中一些复选框。我需要能够在加载页面后选择和取消选中所有复选框。到目前为止，我尝试过：$ scope.itemSelected = [{＆＃34; ItemID＆＃34;：1，＆＃34; ItemName＆＃34;：＆＃34; Item 1＆＃34; }];

        div ng-repeat="item in itemItems">
            <md-checkbox ng-checked="existsItem(item, itemSelected);" ng-click="toggleItem(item, itemSelected);" value="{{item.ItemID}}">
                {{item.ItemName}}
            </md-checkbox>
        </div>

angular.module('MyApp', ['ngMaterial'])
.controller('AdminController', function ($scope) {

$scope.itemItems = [{ "ItemID": 1, "ItemName": "Item 1" }, { "ItemID": 2, "ItemName": "Item 2" },
    { "ItemID": 3, "ItemName": "Item 3" }, { "ItemID": 4, "ItemName": "Item 4" },
    { "ItemID": 5, "ItemName": "Item 5" }];
$scope.itemSelected = [];

$scope.toggleItem = function (item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
        list.splice(idx, 1);
    }
    else {
        list.push(item);
    }
};

$scope.existsItem = function (item, list) {
    return list.indexOf(item) > -1;
};
})

Answer 1

这是在1.1.1以下的角度材料版本中使用ng-checked的错误，但它已在版本1.1.1中修复。请参阅此链接上的更改日志https://github.com/angular/material/blob/master/CHANGELOG.md。如果您想使用ng-check，请获取最新版本。

或者，您可以使用ng-model检查和取消选中复选框。通过操纵数组以添加选中的属性，您可以将其操作为false或true，并在复选框中将此属性用作ng-model。谢谢。

查看

<div ng-repeat="item in itemItems"> <md-checkbox ng-checked="existsItem(item, itemSelected);" ng-click="toggleItem(item, itemSelected);" ng-model="item.checked" value="{{item.ItemID}}"> {{item.ItemName}} </md-checkbox> </div>

<强>控制器

$scope.itemItems = [{ "ItemID": 1, "ItemName": "Item 1", "checked":true}, { "ItemID": 2, "ItemName": "Item 2" , "checked":false}, { "ItemID": 3, "ItemName": "Item 3", "checked":false }, { "ItemID": 4, "ItemName": "Item 4" , "checked":false}, { "ItemID": 5, "ItemName": "Item 5", "checked":false }];

如何选择加载页面上的复选框

1 个答案: