user interface - Checkbox in AngularJS -

We have to create a set of mutually exclusive check boxes and want to implement that argument on the client (incl. Users can get immediate, responsive feedback about their selection options. Normally, mutual specialty will be implemented with the radio button, so that the user can be sure to familiarize with the interface selection. However, in this specific case, let's assume that within a specific sub-category, a user can choose multiple options as they want, but can not opt ​​in from more than one subcategory, imagine that neither you nor some type Contact preferences are set as yes. Or maybe an online food order form occurs where some topping options are mutually exclusive among categories.

The -change attribute for the NG check box lets you attach the function call or expression to the change of the check box Allows Using this, you can deselect those options which you are checking, which are unique among themselves, it can not be optimal but it works. You possibly can add some extra code to operate this extra data, but the following should work just fine.

Javascript:

  var app = angular Module ('plunker', []); App.controller ('MainCtrl', function ($ scope) {$ scope.SelectedNumber = function () {$ scope.redIsFavored = false; $ scope.yellowIsFavored = false; $ scope.blueIsFavored = false;} $ scope.selectedEclore = Function () {$ scope.oneIsFavored = false; $ scope.twoIsFavored = false; $ scope.threeIsFavored = false;} $ scope. Selected acloors (); $ scope.SelectedANumber ();});  

html:

  & lt ;! DOCTYPE html & gt; & Lt; Html ng-app = "plunker" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" /> & Lt; Title & gt; Finger Jess Plunker & lt; / Title & gt; & Lt; Script & gt; Document.write ('& lt; base href =' '+ document.location +' "/>); & lt; / script & gt; & lt; link rel =" stylesheet "href =" style.css "/> & Lt; script data - rp =" angular.js@1.3.x "src =" https://code.angularjs.org/1.3.14/angular.js "data-saver =" 1.3 " 14 "& gt; & lt; / script> gt; script src =" app.js "& gt; & lt; / script & gt; & lt; / head & gt; & lt; body ng-controller = "MainCtrl"> gt; & lt; p & gt; Pick your favorite color or your favorite number & lt; / p & gt; & lt; div & gt; & lt; label & gt; Color & lt; / label & Gt; & lt; / br / & gt; Input type = "checkbox" ng-model = "redIsFavored" ng-change = "selected angle ()"> Red 
 & Lt; Input type = "checkbox" ng-model = "yellowIsfeward" ng-change = "selected excelor (") 
 yellow  
 
 
 Labels & gt; Numbers & lt; / Labels & gt; & lt; br / & gt; Lt; Br / & gt; & Lt; Input type = "checkbox" ng-model = "one eyeshadow" ng-change = "selected number ()" & gt; 1 & lt; Br / & gt; & Lt; Input type = "checkbox" ng-model = "two iffrd" ng-change = "selected member ()" & gt; 2 & lt; Br / & gt; & Lt; Input type = "checkbox" ng-model = "three iffrd" ng-change = "selected member ()" & gt; 3 & lt; Br / & gt; & Lt; / Div & gt; Black: {{blueIsFavored}} & lt; & Lt; Br / & gt; Red color: br / & gt; & Lt; Br / & gt; Number selected: & lt; Br / & gt; 1: {{oneIsFavored}} & lt; Br / & gt; 2: {{twoIsFavored}} & lt; Br / & gt; 3: {{threeIsFavored}} & lt; Br / & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

A work example can be found