发表新帖
发表新帖

AngularJS: ng-model not binding to ng-checked for checkboxes

后端 未结
关注
6 777
别跟我提以往
别跟我提以往 2020-11-22 08:06

I referred to this before asking this question.

AngularJs doesn't bind ng-checked with ng-model

If ng-checked is evaluated to true

相关标签:
6条回答
  • 没有蜡笔的小新
    2020-11-22 08:12

    You don't need ng-checked when you use ng-model. If you're performing CRUD on your HTML Form, just create a model for CREATE mode that is consistent with your EDIT mode during the data-binding:

    CREATE Mode: Model with default values only

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

    EDIT Mode: Model from database

    $scope.dataModel = getFromDatabaseWithSameStructure()

    Then whether EDIT or CREATE mode, you can consistently make use of your ng-model to sync with your database.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-11-22 08:17

    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

    0 讨论(0)
  • 臣服心动
    2020-11-22 08:23

    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

    0 讨论(0)
  • 醉梦人生
    2020-11-22 08:28

    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'"
    0 讨论(0)
  • 终归单人心
    2020-11-22 08:30

    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.

    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-22 08:33

    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 };
    0 讨论(0)
 看不清?
提交回复
热议问题