AngularJS：ng-model未绑定到ng-checked复选框

7fhtutme 于 2022-12-26 发布在 Angular

关注(0)|答案(7)|浏览(285)

我在提出这个问题之前提到了这一点：AngularJs doesn't bind ng-checked with ng-model
如果ng-checked在html端被计算为true，ng-model不会被更新，我不能像上面的问题中建议的那样使用ng-repeat，因为我必须为每个复选框使用一些样式。
下面是我为说明我的问题而创建的plunker。
http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t
要查看我想要的内容，请打开控制台，然后单击Submit按钮。请不要选中任何复选框。

angularjs

来源：https://stackoverflow.com/questions/16601018/angularjs-ng-model-not-binding-to-ng-checked-for-checkboxes

7条答案

按热度按时间

tquggr8v1#

ngModel和ngChecked不应一起使用。
ngChecked需要一个表达式，所以说ng-checked="true"，基本上就是说复选框在默认情况下总是被选中的。
你应该可以只使用ngModel，绑定到你的模型上的一个布尔属性，如果你想要其他的，那么你要么需要使用ngTrueValue和ngFalseValue（现在只支持字符串），要么编写你自己的指令。
您到底想做什么呢？如果您只想在默认情况下选中第一个复选框，那么您应该更改您的模型-item1: true,。
编辑：您不必提交表单来调试模型的当前状态，顺便说一句，您可以直接将{{testModel}}转储到HTML（或<pre>{{testModel|json}}</pre>）中，而且您的ngModel属性可以简化为ng-model="testModel.item1"。
http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

赞(0）回复(0）举报 2022-12-26

xriantvc2#

你可以使用ng-value-true来告诉angular你的ng-model是一个字符串。
只有添加额外的引号，ng-true-value才能工作（如官方Angular docs -https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D所示）

ng-true-value="'1'"

赞(0）回复(0）举报 2022-12-26

myss37ts3#

你能做的就是使用ng-repeat，把你正在迭代的任何东西的值传递给ng-checked，然后从那里利用ng-class根据结果应用你的样式。
我最近做了类似的事情，它对我很有效。

赞(0）回复(0）举报 2022-12-26

8dtrkrch4#

在ng-init中也可以声明为真

<!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>

您可以选择第一个和对象也显示在这里真，假，假

赞(0）回复(0）举报 2022-12-26

jtjikinw5#

`ng-model`和`ng-checked`指令不应一起使用

来自文档：

ng已检查

如果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 };

赞(0）回复(0）举报 2022-12-26

5cnsuln76#

使用ng-model时不需要ng-checked，如果在HTML Form上执行CRUD，只需为CREATE模式创建一个模型，该模型与数据绑定时的EDIT模式一致即可：

创建模式：仅具有默认值的模型

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

编辑模式：数据库中的模型

$scope.dataModel = getFromDatabaseWithSameStructure()

然后，无论是EDIT还是CREATE模式，您都可以始终如一地使用ng-model与数据库同步。

赞(0）回复(0）举报 2022-12-26

7y4bm7vi7#

我在处理从1.2到1.3的Angular js迁移时遇到了这个问题。输入类型复选框没有被触发，如果它是从控制器启动的，以及ng更改事件也没有被触发。我尝试了所有类型，因为ng模型沿着ng检查都不起作用。然后以简单的事情结束，它对我起作用了，比如通过替换为ng单击来删除ng更改事件。

赞(0）回复(0）举报 2022-12-26

我来回答

AngularJS：ng-model未绑定到ng-checked复选框

7条答案

`ng-model`和`ng-checked`指令不应一起使用

ng已检查

创建模式：仅具有默认值的模型

编辑模式：数据库中的模型

相关问题

热门标签

最新问答

AngularJS：ng-model未绑定到ng-checked复选框

7条答案

ng-model和ng-checked指令不应一起使用

ng已检查

创建模式：仅具有默认值的模型

编辑模式：数据库中的模型

相关问题

热门标签

最新问答

`ng-model`和`ng-checked`指令不应一起使用