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

Question 1

在问这个问题之前，我已经提到了这一点。

AngularJs不与ng-model绑定ng-checked

如果在侧面ng-checked评估为，则不会更新。我无法按照上述问题的建议进行操作，因为我必须为每个复选框使用一些样式。truehtmlng-modelng-repeat

这是我为了说明我的问题而创建的插件。

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

要查看我想要的内容，请打开控制台，然后单击Submit按钮。请不要选中任何复选框。

提前致谢！

Question 2

ngModel并且ngChecked不打算一起使用。

ngChecked期望一个表达式，所以说ng-checked="true"，基本上是说默认情况下始终选中该复选框。

您应该能够只使用ngModel，将其绑定到模型的布尔属性。如果您还需要其他东西，那么您要么需要使用ngTrueValueand ngFalseValue（现在仅支持字符串），要么编写您自己的指令。

您到底想做什么？如果您只想默认选中第一个复选框，则应更改模型- item1: true,。

编辑：不必提交表单来调试模型的当前状态，顺便说一句，您可以转储{{testModel}}到HTML（或<pre>{{testModel|json}}</pre>）中。您的ngModel属性也可以简化为ng-model="testModel.item1"。

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

Question 3

您可以使用ng-value-true来告诉angular您的ng-model是一个字符串。

如果我像这样添加额外的引号，就只能使ng-true-value起作用（如官方Angular文档中所示-https: //docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D）

ng-true-value="'1'"

Question 4

您可以做的就是使用ng-repeat传入的值，ng-checked然后ng-class根据结果将样式应用到样式中。

最近我做了类似的事情，对我有用。

Question 5

可以声明为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

Question 6

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

从文档中：

ngChecked

如果其中的表达式ngChecked为真，则在元素上设置选中的属性。

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

— AngularJS ng-checked指令API参考

而是从控制器设置所需的初始值：

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

Question 7

ng-checked使用时不需要ng-model。如果要在HTML表单上执行CRUD，只需为数据绑定期间的CREATE模式创建与EDIT模式一致的模型：

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

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

编辑模式：数据库模型

$scope.dataModel = getFromDatabaseWithSameStructure()

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

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

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

ngChecked

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

编辑模式：数据库模型

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