问题
I referred to this before asking this question.
AngularJs doesn't bind ng-checked with ng-model
If ng-checked
is evaluated to true
on the html
side, the ng-model
is not updated. I can\'t ng-repeat
as suggested in the above question because I have to use some styling for each checkbox.
Here is the plunker that I have created to illustrate my problem.
http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t
To see what I want, please open the console, and just click on Submit
button. Please don\'t check any checkboxes.
Thanks in advance!
回答1:
ngModel
and ngChecked
are not meant to be used together.
ngChecked
is expecting an expression, so by saying ng-checked="true"
, you're basically saying that the checkbox will always be checked by default.
You should be able to just use ngModel
, tied to a boolean property on your model. If you want something else, then you either need to use ngTrueValue
and ngFalseValue
(which only support strings right now), or write your own directive.
What is it exactly that you're trying to do? If you just want the first checkbox to be checked by default, you should change your model -- item1: true,
.
Edit: You don't have to submit your form to debug the current state of the model, btw, you can just dump {{testModel}}
into your HTML (or <pre>{{testModel|json}}</pre>
). Also your ngModel
attributes can be simplified to ng-model="testModel.item1"
.
http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview
回答2:
You can use ng-value-true to tell angular that your ng-model is a string.
I could only get ng-true-value working if I added the extra quotes like so (as shown in the official Angular docs - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)
ng-true-value="'1'"
回答3:
What you could do is use ng-repeat
passing in the value of whatever you're iterating on to the ng-checked
and from there utilising ng-class
to apply your styles depending on the result.
I did something similar recently and it worked for me.
回答4:
Can Declare As the in ng-init also getting 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>
And You Can Select the First One and Object Also Shown here true,false,flase
回答5:
The ng-model
and ng-checked
directives should not be used together
From the Docs:
ngChecked
Sets the checked attribute on the element, if the expression inside
ngChecked
is truthy.Note that this directive should not be used together with
ngModel
, as this can lead to unexpected behavior.— AngularJS ng-checked Directive API Reference
Instead set the desired initial value from the controller:
<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 };
来源:https://stackoverflow.com/questions/16601018/angularjs-ng-model-not-binding-to-ng-checked-for-checkboxes