Question

我很难理解如何在Angular中找出是否选中了某个复选框。

这是问题所在：

我有简单的HTML表格，关于ng-change事件我正在调用一个需要检查是否选择所有＆＃39;选中复选框：

这是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

我有两个函数，第一个应该用于select all并取消选择：

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;
    });
}

另一个用于取消选中＆＃39;选择全部＆＃39;如果取消选中其中一个复选框，则复选框为：

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将在范围内，但我会得到错误的＆＃39;永远的价值。无论我选择还是取消选中复选框。如果我指定一些像this.selectedAll = true这样的值，它当然不会正常工作。

我很难理解为什么ng-model="selectedAll"不可见，以及如何在不使用$scope的情况下将其显示在js文件中，因为我的主要目标是避免使用它。< / p>

有人能看到我犯错的地方吗？

Answer 1

这是AngularJS的常见问题，它使用范围之间的原型继承。 ng-if指令创建一个新范围（称为$ scope2），继承控制器的$ scope。在这个新范围中，您可以访问selectedAll，但如果您指定它（ng-model指令确实），则新值将在$ scope2上设置，因此$ scope2.selectedAll将隐藏$ scope。 selectedAll。

此外，this.selectedAll;严格无效，您必须指定它来定义属性。

要避免这两个问题，请将selectedAll放在一个对象中，然后分配它，如下所示：

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

说明

将其置于对象中的原因是因为分配 $scope2.model.selectedAll将使JS 解析 $scope2.model，这将引用{{1因为$scope.model没有$scope2属性（原型继承），然后在model上定义属性 selectedAll。

执行$scope.model JS解析a.b.c.d = x个对象，然后将a.b.c分配给该对象的属性x。

无d，model 在$scope2.selectedAll = true上定义 selectedAll属性，隐藏前$scope2。

Answer 2

点击此处获取最佳解决方案。

http://jsfiddle.net/TKVH6/2672/

HTML

<div ng-controller="checkboxController">
Check All
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
<ul>        
  <li ng-repeat="item in Items">
    <label>{{item.Name}}
      <input type="checkbox" ng-model="item.Selected" />
    </label>
  </li>
</ul>
</div>

脚本

angular.module("CheckAllModule", [])
    .controller("checkboxController", function checkboxController($scope) {
    $scope.Items = [{
        Name: "Item one"
    }, {
        Name: "Item two"
    }, {
        Name: "Item three"
    }];
    $scope.checkAll = function () {
        if ($scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.Items, function (item) {
            item.Selected = $scope.selectedAll;
        });
    };
});

Answer 3

＆＃13;

var myapp = angular.module('sampleapp', []);

myapp.controller('samplecontoller', function ($scope) {
    $scope.labelList = [
	            { name: 'India' },
	            { name: 'USA' },
	            { name: 'Russia' },
	            { name: 'China' },
	            { name: 'Australia' },
	            { name: 'Japan' }
    ]
    $scope.model = {
        selectedLabelList: []
    }
    $scope.isSelectAll = function () {
        $scope.model.selectedLabelList = [];
        if ($scope.master) {
            $scope.master = true;
            for (var i = 0; i < $scope.labelList.length; i++) {
                $scope.model.selectedLabelList.push($scope.labelList[i].name);
            }
        }
        else { $scope.master = false; }
        angular.forEach($scope.labelList, function (item) {
            item.selected = $scope.master;
        });
    }

    $scope.isLabelChecked = function () {
        var _name = this.label.name;
        if (this.label.selected) {
            $scope.model.selectedLabelList.push(_name);
            if ($scope.model.selectedLabelList.length == $scope.labelList.length) { $scope.master = true; }
        } else {
            $scope.master = false;
            var index = $scope.model.selectedLabelList.indexOf(_name);
            $scope.model.selectedLabelList.splice(index, 1);
        }

    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleapp" ng-controller="samplecontoller">
<input type="checkbox" ng-model="master" ng-change="isSelectAll()"><label>All Countries</label><br>
<li ng-repeat="label in labelList">
<input type="checkbox" ng-model="label.selected" ng-change="isLabelChecked()">
<label>{{ label.name }}</label>
</li>
 </div>

＆＃13;

此示例只是暂停此代码。

在AngularJs

3 个答案:

说明