AngularJS:复选框的ng-model未绑定到ng-checked。

81
我在提问之前参考了这个链接:AngularJs doesn't bind ng-checked with ng-model。如果ng-checkedhtml中的值为true,则ng-model不会被更新。我不能像上面那个问题中建议的那样使用ng-repeat,因为我必须为每个复选框使用一些样式。
下面是我创建的示例,可以说明我的问题:http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t
要查看我想要的效果,请打开控制台,然后只需单击“提交”按钮。请不要勾选任何复选框。
7个回答

124

ngModelngChecked不应该同时使用。

ngChecked需要一个表达式,所以当你使用ng-checked="true"时,你基本上是在说复选框始终会被默认选中。

你应该只需使用ngModel,将其绑定到模型上的布尔属性即可。如果你想要其他内容,则需要使用ngTrueValuengFalseValue(目前仅支持字符串),或者编写自己的指令。

你确切地想做什么?如果你只想默认选中第一个复选框,你应该更改你的模型--item1: true,

编辑:你不必提交表单来调试模型的当前状态,你可以将{{testModel}}转储到你的HTML中(或者<pre>{{testModel|json}}</pre>)。此外,你的ngModel属性可以简化为ng-model="testModel.item1"

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview


ng-checked 是由一个表达式计算为 true。为了表示 ng-model 没有链接,我在那里使用了 true。在初始化控制器时,我希望所有复选框都未被选中。在一些 ajax 请求之后,我计算 ng-checked 来勾选复选框。这是当我的 ng-model 没有更新的时候。 - Abilash
5
@Abilash,你不应该使用ngChecked。你的模型是正确的,你只需要在Ajax回调函数中设置 testModel.item1 = true ,然后调用 $scope.$apply() 来更新你的视图。 - Langdon
2
我们刚刚犯了一个错误,使用了 ng-checked 而不是 ng-model... 再也不会了! - g00glen00b
根据 https://docs.angularjs.org/api/ng/directive/ngChecked 上的说明,"请注意,不应将此(ngChecked)指令与ngModel一起使用,因为这可能会导致意外行为。" - Abhijeet
@Langdon 我为这个问题卡了几个小时...你的提示*$scope.$apply()*解决了我的问题。非常感谢! - Naila Akbar
我也想说一下,$scope.$apply() 也解决了我的问题。这使得复选框在 ajax 调用填充作用域数据后被选中。 - SolidSnake4444

14

谢谢,这对我来说是解决方法! - Jesper1

1
你可以使用ng-repeat将你要迭代的值传递给ng-checked,然后利用ng-class根据结果应用样式。最近我也做了类似的事情,效果不错。

1

ng-modelng-checked指令不应同时使用

来自文档:

ngChecked

如果ngChecked内的表达式为真,则在元素上设置checked属性。

请注意,这个指令不应该与ngModel一起使用,因为这可能会导致意外的行为。

AngularJS ng-checked Directive API Reference


相反,从控制器中设置所需的初始值:

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />

$scope.testModel = { item1: true };

1
可以在ng-init中声明为true。
<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

你可以选择第一个对象,这里也显示了true、false和flase。


ngInit 指令只有少数几种适当的用法。滥用此指令会在模板中添加不必要的大量逻辑。请参阅 AngularJS ng-init Directive API Reference - georgeawg

0

我在进行从 1.2 到 1.3 版本的 Angular JS 迁移时遇到了这个问题。如果复选框是通过控制器初始化的,那么它不会触发输入类型为 checkbox ,同时 ng change 事件也不会被触发。我尝试了所有类型,因为 ng model 和 ng checked 不起作用。最后以一种简单的方式解决了它:通过将 ng change 事件替换为 ng click 来完成。


1
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节,例如引用或文档,以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

0

在使用ng-model时,您不需要ng-checked。如果您正在对HTML表单执行CRUD操作,请为CREATE模式创建一个与数据绑定一致的模型,该模型与EDIT模式一致:

CREATE模式:仅具有默认值的模型

$scope.dataModel = {
   isItemSelected: true,
   isApproved: true,
   somethingElse: "Your default value"
}

编辑模式:从数据库中获取模型

$scope.dataModel = getFromDatabaseWithSameStructure()

无论是EDIT还是CREATE模式,您都可以始终使用ng-model与数据库同步。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接