81

我在问这个问题之前提到了这个。

AngularJs 不绑定 ng-checked 和 ng-model

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

这是我为说明我的问题而创建的 plunker。

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

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

提前致谢!

4

7 回答 7

124

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

于 2013-05-17T03:52:19.290 回答
14

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

如果我像这样添加额外的引号,我只能让 ng-true-value 工作(如官方 Angular 文档中所示 - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

ng-true-value="'1'"
于 2015-04-07T11:08:49.333 回答
1

Can Declare As in 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>

并且您可以选择第一个和此处也显示的对象 true,false,flase

于 2016-12-07T10:14:53.070 回答
1

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

从文档:

已检查

如果里面的表达式为真,则在元素上设置选中的属性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 };
于 2018-07-06T16:57:30.540 回答
1

您可以做的是ng-repeat将您正在迭代的任何内容的值传递给ng-checked并从那里ng-class根据结果应用您的样式。

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

于 2016-08-18T12:51:08.563 回答
0

我在处理从 1.2 到 1.3 的 angular js 迁移时遇到了这个问题。如果输入类型复选框是从控制器启动的,并且 ng 更改事件也未触发,则不会触发输入类型复选框。我尝试了所有类型,因为 ng model 和 ng checked 不起作用。然后以对我有用的简单事情结束,例如通过替换为 ng click 来删除 ng change 事件。

于 2021-12-14T16:40:53.740 回答
0

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

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

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

编辑模式:来自数据库的模型

$scope.dataModel = getFromDatabaseWithSameStructure()

那么无论是模式EDIT还是CREATE模式,您都可以始终如一地使用您的ng-model来与您的数据库同步。

于 2020-09-18T08:12:24.420 回答