Angular dropdown ng-change event

roshni picture roshni · Oct 21, 2016 · Viewed 19.7k times · Source

I have a angular dropdown cmbAll and list of cmbFruit in ng-repeat. I want when i change cmbAll selected value on cmbFruit [i] also change. But on load cmbAll is populated with -1 indexselected and cmbFruit [i] with their specific indexex. Below is the code. Please suggest.

<select id="cmbAll"  tabindex="" title="" ng-change="onChange()">
                                <option value="">-Select One-</option>
                                <option value="1">Apple</option>
                                <option value="2">Banana</option>
                                <option value="3">Mango</option>
                                <option value="4">Papaya</option>
                                <option value="5">Pear</option>
  </select>
   <div data-ng-repeat="x in InfoList">
     <select id="cmbFruit" name="cmbFruit" ng-model="x.Name"
       ng-options="c.Value as c.Text    for c in x.List"></select>

   </div>

What should be the code for onchange()

Answer

Sravan picture Sravan · Oct 21, 2016

Take ng-model for cmbAll

<select id="cmbAll"  tabindex="" title="" ng-change="onChange()" ng-model="cmbAll">
        <option value="">-Select One-</option>
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Mango</option>
        <option value="4">Papaya</option>
        <option value="5">Pear</option>
</select>
<div data-ng-repeat="x in InfoList">
    <select id="cmbFruit" name="cmbFruit" ng-model="x.Name"
    ng-options="c.Value as c.Text for c in x.List"></select>

</div>

Controller.

  $scope.onChange = function()
{
   for(var i=0 ; i <  $scope.InfoList.length; i++)
            {
                $scope.InfoList[i].name  = $scope.cmbAll
            }

}

This will assign the value selected in cmbAll to second dropdown.