ng-checked
在html
中的值为true
,则ng-model
不会被更新。我不能像上面那个问题中建议的那样使用ng-repeat
,因为我必须为每个复选框使用一些样式。下面是我创建的示例,可以说明我的问题:http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t。
要查看我想要的效果,请打开控制台,然后只需单击“提交”按钮。请不要勾选任何复选框。
ng-checked
在html
中的值为true
,则ng-model
不会被更新。我不能像上面那个问题中建议的那样使用ng-repeat
,因为我必须为每个复选框使用一些样式。ngModel
和ngChecked
不应该同时使用。
ngChecked
需要一个表达式,所以当你使用ng-checked="true"
时,你基本上是在说复选框始终会被默认选中。
你应该只需使用ngModel
,将其绑定到模型上的布尔属性即可。如果你想要其他内容,则需要使用ngTrueValue
和ngFalseValue
(目前仅支持字符串),或者编写自己的指令。
你确切地想做什么?如果你只想默认选中第一个复选框,你应该更改你的模型--item1: true,
。
编辑:你不必提交表单来调试模型的当前状态,你可以将{{testModel}}
转储到你的HTML中(或者<pre>{{testModel|json}}</pre>
)。此外,你的ngModel
属性可以简化为ng-model="testModel.item1"
。
您可以使用ng-value-true告诉angular,您的ng-model是一个字符串。
如果像官方Angular文档中所示那样添加额外的引号,我只能使ng-true-value正常工作 - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D。
ng-true-value="'1'"
ng-repeat
将你要迭代的值传递给ng-checked
,然后利用ng-class
根据结果应用样式。最近我也做了类似的事情,效果不错。ng-model
和ng-checked
指令不应同时使用来自文档:
ngChecked
如果
ngChecked
内的表达式为真,则在元素上设置checked属性。请注意,这个指令不应该与
ngModel
一起使用,因为这可能会导致意外的行为。
相反,从控制器中设置所需的初始值:
<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 };
<!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我在进行从 1.2 到 1.3 版本的 Angular JS 迁移时遇到了这个问题。如果复选框是通过控制器初始化的,那么它不会触发输入类型为 checkbox ,同时 ng change 事件也不会被触发。我尝试了所有类型,因为 ng model 和 ng checked 不起作用。最后以一种简单的方式解决了它:通过将 ng change 事件替换为 ng click 来完成。
在使用ng-model
时,您不需要ng-checked
。如果您正在对HTML表单执行CRUD操作,请为CREATE
模式创建一个与数据绑定一致的模型,该模型与EDIT
模式一致:
$scope.dataModel = {
isItemSelected: true,
isApproved: true,
somethingElse: "Your default value"
}
$scope.dataModel = getFromDatabaseWithSameStructure()
无论是EDIT
还是CREATE
模式,您都可以始终使用ng-model
与数据库同步。
ng-checked
是由一个表达式计算为 true。为了表示ng-model
没有链接,我在那里使用了 true。在初始化控制器时,我希望所有复选框都未被选中。在一些 ajax 请求之后,我计算ng-checked
来勾选复选框。这是当我的ng-model
没有更新的时候。 - AbilashngChecked
。你的模型是正确的,你只需要在Ajax回调函数中设置testModel.item1 = true
,然后调用$scope.$apply()
来更新你的视图。 - Langdonng-checked
而不是ng-model
... 再也不会了! - g00glen00b