ng-change event firing only once inside ng-repeat

Question

Here in my form, I am using two radio buttons and would like to check the selected values. But this does not work as expected. I would like to determine the individual radio selection value and display Big/Small in the Result column

<div ng-controller="CityCtrl">
  <table>
    <tr>
      <th>Name</th>
      <th>Big</th>
      <th>Small</th>
      <th>Result</th>
    </tr>
    <tr ng-repeat="city in cities">
      <td>{{ city.name }}</td>
      <td>
        <input type="radio" name="{{city.name}}-{{$index}}" ng-model="big" value="big_value" ng-change="check(city.name, big)">
      </td>
      <td>
        <input type="radio" name="{{city.name}}-{{$index}}" ng-model="small" value="small_value" ng-change="check(city.name, small)">
      </td>
      <td>***</td>
    </tr>
  </table>
</div>

Controller:

var myApp = angular.module('cityApp', []);

function CityCtrl($scope) {
  $scope.big = '';
  $scope.small = '';
  $scope.cities = [{
    id: 1,
    name: 'Tokyo'
  }, {
    id: 2,
    name: 'Guangzhou'
  }, {
    id: 3,
    name: 'Seoul'
  }];

  $scope.check = function(city, value) {
    console.log("City->" + city + " ::: Value->" + value);
  };
}

From other answers I did infer a few things:

Understand Prototypical Inheritance in JS ?!
ng-repeat creates child scope that affects these radios inside ng-repeat
use $parent on ng-modal in the radio

I did played around, but couldn't make this work, I guess I am making some obvious mistake here.

Here is the fiddle: http://jsfiddle.net/mw2us37h/

NOTE: I am not using ng-value but passing a hardcoded value. Changing to ng-click doesnt work either

Possible duplicate of [ng-change event only fires once for each radio button when created with ng-repeat](http://stackoverflow.com/questions/23790239/ng-change-event-only-fires-once-for-each-radio-button-when-created-with-ng-repea) — OstrichProjects, Feb 16 '17 at 17:41

score 2 · Answer 1 · answered Feb 16 '17 at 17:41

2

Flagged this as a duplicate, but it seems like the solution is to use ng-click instead of ng-change when working with radio buttons in angularjs.

Here is an edit of your fiddle that works: http://jsfiddle.net/mw2us37h/1/

answered Feb 16 '17 at 17:41

OstrichProjects

318
1
2
13

For now we had to use ng-change as ng-click causes problem in the UI as clicking on nearest label it triggers the click event... – FakirTrappedInCode Feb 20 '17 at 14:47

score 0 · Accepted Answer · answered Feb 16 '17 at 19:48

I'm not sure I understand what your trying. I think you like to display the radio button value in the result column and/or have a function on click where the value is passed.

Display the radio button value in result column
I would change the ngModel value so it binds to something city specific. So change:

<input type="radio" name="{{city.name}}-{{$index}}" ng-model="big" value="big_value">

to:

<input type="radio" name="{{city.name}}-{{$index}}" ng-model="city.size" value="big_value">

and

<input type="radio" name="{{city.name}}-{{$index}}" ng-model="small" value="small_value">

to

<input type="radio" name="{{city.name}}-{{$index}}" ng-model="city.size" value="small_value">

So the model points to the same variable city.size, this is where the selected value will be saved. Then change *** in the result column to city.size See changes fiddle: http://jsfiddle.net/u2kxuyr7/

Get value on ngClick

Use ngChange as you allready do I would do it a bit different for simplicity. Change:

ng-change="check(city.name, whatEverValue)"

to: ng-change="check(city)"

and the check function would look like:

  $scope.check = function(city) {
    console.log("City->" + city.name + " ::: Value->" + city.size);
  };

See fiddle: http://jsfiddle.net/Lmszxj8s/
Then ngChange is fired on each change.

Also how could I retrieve a map of city:size from all the selected radios if I would want to collect this on a Submit button to process at the backend? — FakirTrappedInCode, Feb 20 '17 at 14:45
Here take a look at this fiddle http://jsfiddle.net/8dct8ptz/. Made a submit button that logs different type of post data. The last one is most map alike. city.id => city.size — Anders Vestergaard, Feb 20 '17 at 16:14

ng-change event firing only once inside ng-repeat

2 Answers2