AngularJS:复选框中的checked属性没有'不起作用

AngularJS: checked attribute in checkbox doesn't work

本文关键字：不起作用 属性 复选框 checked AngularJS      更新时间：2023-09-26

这是我的代码：

<body ng-app="app">
<div ng-controller="TestController">
    <input type="checkbox" checked ng-repeat="num in array track by $index" ng-model="array[$index]" />
</div>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        $scope.array = [1, 2, 3, 4];
    });
</script>

我特别为每个<input>标记添加了checked属性，因为默认情况下可以选中复选框。但结果是四个复选框中没有一个被选中。为什么？

我知道如果我添加ng-checked="num"属性可以使检查工作，但我仍然想知道为什么自然的检查arrtibute不工作。

来自角度文档

默认情况下，ngModel通过引用而不是值来监视模型。

当你说array[$index]时，它给出的是你的型号名称的整数值，它是错误的

请用这种方式

<div ng-controller="TestController">
    <input type="checkbox" checked ng-repeat="num in array track by $index" ng-model="array[$index].checked" title="{{array[$index].val}}" />
</div>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        $scope.array = [{val:1,checked:true},{val:2,checked:false},{val:3,checked:true},{val:4,checked:true},{val:5,checked:false}];
    });
</script>

ng-model="array[$index]"将dom检查的属性设置为false

至于checked不起作用的原因：当angular使用ng-checked或ng-model绑定到复选框时，它会设置checked属性，以便复选框在浏览器中看起来正确-它不在乎第一次绑定时checked属性是什么。

您不应该将checked与ng模型相结合。同样适用于使用ng模型检查的ng。两者都会修改复选框选中状态，从而导致不可预测的行为。

如果您希望您的复选框在默认情况下被选中，请通过ng模型指令进行操作。

你使用的结构似乎有点奇怪。您的复选框不会被选中，因为角度与值不匹配。

默认情况下，当用户与复选框交互时，在复选框上使用ng模型会在ng模型值中产生true和false。您可以通过使用ng-true-value和ng-false-value来更改它。检查角度文件。

如果您将ng true value="2"添加到复选框中，则最初会选择第二个复选框，因为它以值2开头。

相关文章：