javascript - 在 AngularJs 中单击时选择和取消选择所有复选框

Question

我很难理解如何确定 Angular 中是否选中了某个复选框。

问题是:

我有一个简单的 HTML 表格，在 ng-change 事件中我调用了一个函数来检查是否选中了“全选”复选框:

这是 HTML:

<table class="table table-striped">
    <thead>
        <tr class="table-header">
            <th ng-if="!newTestSessionCtrl.formData.battery.id"><input type="checkbox" ng-model="selectedAll" ng-change="newTestSessionCtrl.isSelectAll()" /></th>
            <th>Test</th>
            <th>Available Time</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in newTestSessionCtrl.formData.battery.testDefinitions">
            <td ng-if="!newTestSessionCtrl.formData.battery.id"><input type="checkbox" ng-model="row.selected" ng-change="newTestSessionCtrl.isLabelChecked(); newTestSessionCtrl.validate()" /></td>
            <td>{{row.name}}</td>
            <td>{{(row.duration / 60) | number:0}} minutes</td>
        </tr>
    </tbody>
</table>

模型名称为:selectedAll

我有两个函数，第一个应该用于全选和取消选择:

isSelectAll() {
    let self = this;
    self.model.selectedLabelList = [];
    if(self.selectedAll) {
        self.selectedAll = true;
        for(var i=0; i < self.formData.battery.testDefinitions.length; i++) {
            self.model.selectedLabelList.push(self.formData.battery.testDefinitions[i].name);       
        }
    }
    else { 
        self.selectedAll = false; 
    }
    angular.forEach(self.formData.battery.testDefinitions, function(item) {
        item.selected = self.selectedAll;
    });
}

如果取消选中其中一个复选框，另一个用于取消选中“全选”复选框的手册是:

isLabelChecked() {
    let self = this;
    let _name = this.formData.battery.name;
    if(this.formData.battery.selected) {
        self.model.selectedLabelList.push(_name);
        if(self.model.selectedLabelList.length == self.labelList.length ) {
            self.selectedAll = true;
        }
    }else{
        self.selectedAll = false;
        let index = self.model.selectedLabelList.indexOf(_name);
        self.model.selectedLabelList.splice(index, 1);
    }
}  

问题是在 js 文件中定义 selectedAll 时。

我有构造函数，如果我没有在其中定义任何内容，selectedAll 将不在范围内。

如果我这样做:

class NewTestSessionController {
    constructor($scope, $state, resources, NewTestSessionService, formats, AuthenticationService, toastr, momentTimezone, _) {
        this.model = {
            selectedLabelList : []
        };

        this.selectedAll;
}

selectedAll 将在范围内，但我总是会得到“假”值。无论我是否选中或取消选中复选框。如果我像这样分配一些值 this.selectedAll = true 它当然不会正常工作。

我无法理解为什么 ng-model="selectedAll" 不可见以及如何在不使用 $scope 的情况下使其在 js 文件中可见，因为我实践的主要目标是避免使用它。

有人能看出我哪里出错了吗？

Answer 1

这是 AngularJS 的一个常见问题，它在作用域之间使用原型(prototype)继承。ng-if 指令创建一个新的作用域(称之为 $scope2)继承你的 Controller 的 $scope。在这个新范围内，您可以访问 selectedAll，但如果您分配它(ng-model 指令)，新值将设置在 $scope2 上，因此 $ scope2.selectedAll 将隐藏 $scope.selectedAll。

此外，this.selectedAll;严格来说是没有作用的，你必须赋值给它来定义属性。

为了避免这两个问题，把selectedAll放在一个对象中，然后赋值给它，像这样:

this.model.selectedAll = null; 和 ng-model="model.selectedAll"

解释

将它放在对象中的原因是因为分配 $scope2.model.selectedAll 将使 JS resolve $ scope2.model，它指的是$scope.model，因为$scope2没有model属性(原型(prototype)继承)，然后在 $scope.model 上定义属性 selectedAll。

当你执行 a.b.c.d = x 时，JS 解析了 a.b.c 对象，然后将 x 赋值给属性 d那个对象。

没有 model，$scope2.selectedAll = true 定义 $scope2 上的 selectedAll 属性，它隐藏了之前的 $scope.selectedAll。