AngularJS: Binding a boolean to a switch so that it updates the model to false to uncheck

Question

In my AngularJS application, I display contact data in a grid. My typical JSON contacts look like below ...

[ { type: "IM", value: "mavaze123", default: true }, { type: "IM", value: "mvaze2014", default: false }, { type: "IM", value: "mavaze923", default: false }, { type: "IM", value: "mvaze8927", default: false }, { type: "Email", value: "[e-mail]", default: true }, { type: "Email", value: "[e-mail]", default: false } ] 

The last "default" property is actually a switch, the choice of which should change the initial default value of the corresponding contact type above JSON. For each type of contact, there can be one by default, i.e. We can group switches based on the type of contact.

 <div ng-repeat="contact in contacts"> <div>{{contact.type}}</div> <div>{{contact.value}}</div> <div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="true"/></div> </div> 

Note. The above code is not accurate, but about the same as it appears inside the custom mesh component.

Now, when I load the page for viewing / editing the form using the above JSON, it correctly shows the radio status of all contacts. The problem occurs after the page loads, when the user selects another contact by default. This actually changes the default model value to true for the newly selected contact, however, the default model value of the original contact remains true even if its radio state changes to uncheck / blur (because they have the same "name" value).

I thought to write a directive, but I can’t start it when I turn on the radio blur / uncheck the box.

There are different messages about binding logical values ​​to switches, but I can’t get them to work in my scenario, since I want to update the model values ​​for a separate switch in the radio group. See That there is no single model representing a radio group.

Answer 1

I added an attribute directive to my input statement ...

 <div ng-repeat="contact in contacts"> <div>{{contact.type}}</div> <div>{{contact.value}}</div> <div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="true" boolean-grid-model /></div> </div> 

And my custom directive ...

 myModule.directive('booleanGridModel') { return { restrict: 'A', require: 'ngModel', link: function (scope, elem, attrs, controller) { var radioSelected = scope.$eval(attrs.ngModel); if(radioSelected) { var selectedContact = scope.contact; _.each(scope.contacts, function(contact) { if(contact.type === selectedContact.type) { _.isEqual(contact, selectedContact) ? contact.default = true : contact.default = false; } }); } } }; } 

Answer 2

I think you should change your design to separate contacts from contactTypes and keep the key for the default contact in the contact type.

There are duplicate values for default in your current design and this is not the desired way to work with radio .

 $scope.contacts = [ { type: "IM", value: "mavaze123" }, { type: "IM", value: "mvaze2014" }, { type: "IM", value: "mavaze923" }, { type: "IM", value: "mvaze8927" }, { type: "Email", value: "[e-mail]" }, { type: "Email", value: "[e-mail]" } ]; $scope.contactTypes = { "IM": { default:"mavaze123"}, //the default is contact with value = mavaze123 "Email": { default:"[e-mail]"} }; 

You Html:

 <div ng-repeat="contact in contacts"> <div>{{contact.type}}</div> <div>{{contact.value}}</div> <div><input type="radio" name="{{contact.type}}" ng-model="contactTypes[contact.type].default" ng-value="contact.value"/></div> </div> 

Demo

I assume that the contact key is value , you can use Id for your contact.

Answer 3

WHY you declare ng-value="true" , please remove this

 <div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="{{contact.default}}"/></div> 

Use $scope.$apply() in your code-changing value

Like something below

 $scope.$apply(function ChangeType() { /Code }); 

And you need to change name="{{contact.type}}" to name="contact.type{{$index}}" because some types have the same name.