ng-checked and ng-change radio button not work together - angularjs

对着背影说爱祢 提交于 2019-12-03 11:29:37

This is because you are not using ng-model:

FORKED PLUNKER

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(selectedRadius)"
         ng-model="radius.checked">

    {{radius.name}}

  </label>
</div>

UPDATE:

I'm sorry that I didn't notice that you wanted to have a default radio button checked, if that is the case then the approach you're taking is incorrect. You must consider the model as non-individual parts in a group of radio buttons but as a whole, they are supposed to be one value instead. You don't have to use ng-repeat's radio scope variable instead use another ng-model as the selectedRadius model. You're input radio needs to have a value, and in this case we'll use ng-value to determine the current value of the model.

UPDATED PLUNKER [2014 September]

JAVASCRIPT

Controller

  $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

  // selected value is {id:2, name:"2 Mile"}
  $scope.selectedRadius = $scope.radii[3];

HTML

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(radius)"
         ng-model="selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>

UPDATED PLUNKER [2015 January]

dcz.switcher's problem below suggested that the solution above does not trigger the ng-change event handler when a radio button is reselected. The main problem was that the ng-model was referring to the ng-repeat's scope and not to the controller's scope from the second change. To solve this problem you can use the $parent property. An alternative would be to use controllerAs alias and use the alias itself to access your controller's property. To understand more about scopes in AngularJS, I suggest you read more about it in here.

HTML

<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick($parent.selectedRadius)"
         ng-model="$parent.selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>

Use default values and everything will work like a charm, no need to $watch scope or anything... and Yes you need ng-model

  • ng-model - does all work
  • ng-checked - makes sure you have CHECKED attribute present
  • ng-change - will trigger your function on-Change

HTML example:

<input type="checkbox" 
    ng-model="row.active"
    ng-checked="row.active"
    ng-true-value="1"
    ng-false-value="0"
    ng-change="update(row)"
/>
<!-- test -->
{{ row.active }}

JS optional:

$scope.update = function(row) {
    console.log('row.active');
}

This is because ng-change requires ngModel to be present.

Hope this helps. Cheers!

The ng-change directive requires the ng-model directive to be present.

From the Docs:

ngChange

Note, this directive requires ngModel to be present.

— AngularJS ng-change Directive API Reference


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.

For more information, see

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!