CODEWITHSUNDEEP
javascriptangularjs
FakirTrappedInCode
FakirTrappedInCode

Reputation: 659

ng-change event firing only once inside ng-repeat

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:

  1. Understand Prototypical Inheritance in JS ?!
  2. ng-repeat creates child scope that affects these radios inside ng-repeat
  3. 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

Upvotes: 0

Views: 2152

Answers (2)

Anders Vestergaard
Anders Vestergaard

Reputation: 1149

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.

Upvotes: 0

OstrichProjects
OstrichProjects

Reputation: 318

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/

Upvotes: 2

Related Questions