ng-change is not working after one selection

Question

I have already read this solution where @ryeballar gives the answer to the problem as that the scope of ng-repeat and controller are clashing so using either $parent/controller as syntax will solve the problem. But somehow in my case, the solution doesn't seem to work. The ng-change is not called at all, even after declaring it as a controller As. Also it is giving me weird output as well.
I have created a plunker for the same.

HTML

 <tr ng-repeat="item in renew.items">
     <td>{{item.deviceId}}</td>
     <td>{{item.carName}}</td>
     <td>{{item.regNumber}}</td>
     <td><input type="radio" name="{{item.deviceId}}" ng-model="renew.foo" ng-value="Monthly" ng-change="renew.updatePref(item, 'Monthly')">Monthly
     <input type="radio" ng-value="Yearly" ng-model="renew.bar" name="{{item.deviceId}}" ng-change="renew.updatePref(item, 'Yearly')">Yearly
     </td>
     <td>{{item.planStatus}}</td>
 </tr>

Here I have two radio buttons namely Monthly and Yearly created with the same name = item.deviceId so that only one remains clicked at a time. Firstly I have tried a lot of things. Setting ng-value to true so that Monthly is checked initially Which works but ng-change stops working and don't get called on a re-click. Can anybody guess why?The exact behaviour that I want is listed in the comments in Index.html.

it's hard to sort out what is going wrong with your code, but you seem to have issues in your code with the scope of `this`; inside these nested function calls, `this` isn't going to point to the properties outside the function calls. — Claies, Oct 06 '16 at 21:44
also mixing up using `$scope` and `this` in the controller beyond just inside the functions — charlietfl, Oct 06 '16 at 21:47

ram1993 · Accepted Answer · 2016-10-06T22:32:01.273

1

Please change, initially

vm.foo = 'Monthly'

<input type="radio" name="{{item.deviceId}}" ng-model="renew.foo" ng-value="'Monthly'" ng-click="renew.updatePref(item, 'Monthly')">Monthly
<input type="radio"  name="{{item.deviceId}}" ng-model="renew.bar" ng-value="'Yearly'" ng-click="renew.updatePref(item, 'Yearly')">Yearly

you have use ng-change, change event never happen as value for these input remains always same. use,

var vm = this;

you are also using ng-value="Monthly", Monthly is variable (undefiend) for ng-value. either use value="Monthly" or ng-value="'Monthly'".

Working Demo of Your Code

edited Oct 06 '16 at 22:32

answered Oct 06 '16 at 22:25

ram1993

979
1
9
13

I solved it. With your help and some of my targeted guessing. [Here](http://plnkr.co/edit/1MeoCTQUUVi00vklyWeP?p=preview) is the solution There is only one issue remaining here. Why is vm working the way it is. We do `var vm =this`.So as to save the initial value of this in a variable, so that if the context changes for this. We will have the initial value stored. Why is it changing here? My best guess. That ng-repeat is causing the value of this to change and updatePref is not in the purview of ng-repeat's scope hence updatePref is never called if we don't use vm. Am I right? – Saras Arya Oct 07 '16 at 11:45
for this keyword, http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/ – ram1993 Oct 07 '16 at 12:47
There is no relation between ng-repeat transclusion scope and this.updatePref here. Basically value of foo never changes, so ng-change not occurs and so updatePref is never called. – ram1993 Oct 07 '16 at 12:49
you can try this instead of vm for updatePref (`this.updatePref`). This will also work as you are using ng-click. – ram1993 Oct 07 '16 at 12:52
I think that does it. Thanks – Saras Arya Oct 07 '16 at 13:14

score 0 · Answer 2 · answered Oct 06 '16 at 21:54

Your main problem is assigning things to $scope when you are using controllerAs

When you make the functions as properties of the controller they work fine

 app.controller('testCntrl', ['$scope', '$uibModal', function($scope, $uibModal) {

       var vm = this;// store reference ALWAYS!

Then change all references of $scope to vm

   //$scope.selectedDevices = [];
   vm.selectedDevices = [];
   //$scope.selected = function(device) {
   vm.selected = function(device) {
        if (device.checked) {
            //$scope.selectedDevices.push(device);
            vm.selectedDevices.push(device);
        } 
      //........

Generally working demo (not all scope conversions done)

Your solution doesn't work on Radio Buttons which are present inside the modal. The situation still persists. Could you please modify your solution? — Saras Arya, Oct 07 '16 at 10:53

ng-change is not working after one selection

2 Answers2