0

I have a form wherein i have a list of addresses against which there are 2 sets of radio buttons- one tells whether the address is occupied or not and other tells about the ownership(ie rented or owned) if the address is occupied.

Initially when the screen is rendered, I set the default values as 'N' for 'Occupied' and 'Ownership' will be unselected and disabled. Only if the user selects 'Y' for 'Occupied', 'Ownership' will be enabled and have a default value of 'O'.

I am getting the default values properly binded when the screen is rendered.

The problem begins when I change the value of Occupied button and the issue is with Ownership radio buttons. When the Ownership radio buttons value get changed through mouse click the data binding is happening. but when it gets unselected/ selected by the 'ng-checked' expression, the data binding is not happening. How to make the data binding happen ie to get "" when 'ng-checked'=false and 'O' when ng-checked=true (O gets selected by default when ng-checked=true).

Here is my code

<div class="row" ng-repeat="address in addresses ">
    <label class="col-md-2 text-info">{{address.ref}}</label>
    <label class="text-info">Occupied *</label>

    <input type="radio" ng-model=" address.occupied " value="Y"/>
    <label class="text-info">Inuse</label>
    <input type="radio" ng-model=" address.occupied " value="N"/>
    <label class="text-info">Not in use</label>

    <label class="text-info"> Ownership</label>

    <input type="radio" name="{{address.ref}}ownership" ng-checked=" address.occupied == 'Y'" ng-model="address.ownership" value="R" ng-disabled=" address.occupied == 'N'"/>
    <label class="text-info">Rented</label>
    <input type="radio" name="{{address.ref}}ownership" ng-checked=" address.occupied == 'Y'" ng-model="address.ownership" value="O" ng-disabled=" address.occupied == 'N'"/>
    <label class="text-info">Owned</label>
</div>

$http.get('load').success(function(data){
$scope.addressConfiguration.addresses.push({ "ref" :"A234", "occupied": "N", "ownership":""}, {"ref": "A114", "occupied": "N", "ownership":""}, {"ref": "A278", "occupied": "N", "ownership":""}, {"ref": "A903", "occupied": "N", "ownership":""});
});

Plunker [link] http://plnkr.co/edit/aUeNV4EpnaV04TlquUHs?p=preview

bpaulo
  • 23
  • 8
  • can you add a plunker with code . that would be helpful – super cool Dec 01 '15 at 14:08
  • Possible duplicate of [ng-checked="true" being ignored on checkbox](http://stackoverflow.com/questions/29934521/ng-checked-true-being-ignored-on-checkbox) – Phil Dec 02 '15 at 04:38
  • ... or [AngularJS: ng-model not binding to ng-checked for checkboxes](http://stackoverflow.com/questions/16601018/angularjs-ng-model-not-binding-to-ng-checked-for-checkboxes) – Phil Dec 02 '15 at 04:39
  • @Phil The scenario mentioned in 'ng-checked="true" being ignored on checkbox ' is entirely different. The latter link talks about static binding of data ie just after the screen is renedered & before any change is made in the selections. My issue happens when you try changing the selections and it is with radio buttons – bpaulo Dec 02 '15 at 05:13
  • 1
    The issue happens when you try changing the selection of one set of radio button and the other set get checked/unchecked through 'ng-checked' value. The first set's value gets binded but the second set's value is not binding as its value was changed by 'ng-checked' and not by mouse click. – bpaulo Dec 02 '15 at 05:23

1 Answers1

0

Adding an expression in data-ng-click attribute fixed my issue.

<input type="radio" ng-model=" address.occupied " value="Y" ***data-ng-click="address.occupied='Y'"***/>
<input type="radio" ng-model=" address.occupied " value="N" ***data-ng-click="address.occupied=''"***/>

Find the solution in plunker [link] http://plnkr.co/edit/aUeNV4EpnaV04TlquUHs?p=preview

bpaulo
  • 23
  • 8