CODEWITHSUNDEEP
angularjs
matrixguy
matrixguy

Reputation: 306

angularjs change view on ng-model change

<select ng-model="Listbox" ng-options="build for build in builds" ng-change="show(Listbox); showtable(Listbox);showummary(Listbox);"style="width: 500px" id="lbox"></select>

Here on change of option i am calling all 3 functions but i want them to be called depending on which radio button is checked.

<tr><td >
       <input type="radio" checked onclick="showF();">Summary
    </td>
    <td >
         <input type="radio" onclick="showS();">Detailed Summary
   </td>
</tr>

If summary is selected then only call show and showtable otherwise call showsummary. I can put them in radio buttion tag but then change in select option won't be deteced.

Upvotes: 4

Views: 7646

Answers (1)

developer033
developer033

Reputation: 24864

You can modify your ngChange to trigger a single function, as below:

<select ng-model="Listbox" ng-options="build for build in builds" ng-change="checkShow()"style="width: 500px" id="lbox"></select>

Then you change your radio buttons:

<input type="radio" value="summary" ng-model="radioSelected">Summary
<input type="radio" value="detailedSummary" ng-model="radioSelected">Detailed Summary

Note: Don't use onclick, use ngClick if you need to trigger a click event in Angular.

Finally, in your controller you can just check what's the option selected in radio:

$scope.radioSelected = 'summary'; // Default selection

$scope.checkShow = function() {
  if ($scope.radioSelected === 'summary') { 
    show();
    showTable();
  } else {
    showSummary();
  }
}

Upvotes: 2

Related Questions