CODEWITHSUNDEEP
angularjsuser-interfacecheckbox
Amit Sinha
Amit Sinha

Reputation: 11

Checkbox in AngularJS

We want to have a set of mutually exclusive check boxes and want to implement that logic on the client (angularjs) so that the user can get immediate, responsive feedback about their selection choices. Normally, mutual exclusivity would be enforced with radio buttons ensuring user familiarity with the interface selections. However, in this specific case, let’s suppose that within a specific sub category, a user can select as many options as they want, but cannot select options from more than one subcategory. Imagine setting contact preferences as either No or some type of Yes. Or perhaps there is a online food order form where certain topping choices are mutually exclusive between categories.

Upvotes: 1

Views: 1047

Answers (1)

Mark
Mark

Reputation: 356

the ng-change attribute for a check-box allows you to attach a function call or expression to the change of a check-box. Using this you can de-select the options that are mutually exclusive to those you are checking, this may not be optimal but it does work. You could probably add some additional code to make this more data driven but the following should work just fine.

Javascript:

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {



 $scope.SelectedANumber=function(){
    $scope.redIsFavored=false;
    $scope.yellowIsFavored=false;
    $scope.blueIsFavored=false;
  };

  $scope.SelectedAColor=function(){
    $scope.oneIsFavored=false;
    $scope.twoIsFavored=false;
    $scope.threeIsFavored=false;
  };

  $scope.SelectedAColor();
  $scope.SelectedANumber();
});

html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Choose your favorite colors or your favorite numbers</p>
  <div>
    <label>Colors</label>
    <br/>
    <input type="checkbox" ng-model="redIsFavored" ng-change="SelectedAColor()">Red
    <br/>
    <input type="checkbox" ng-model="yellowIsFavored" ng-change="SelectedAColor()">Yellow
    <br/>
    <input type="checkbox" ng-model="blueIsFavored" ng-change="SelectedAColor()">Blue
    <br/>
    <br/>
    <label>Numbers</label>
    <br/>
    <input type="checkbox" ng-model="oneIsFavored" ng-change="SelectedANumber()">1
    <br/>
    <input type="checkbox" ng-model="twoIsFavored" ng-change="SelectedANumber()">2
    <br/>
    <input type="checkbox" ng-model="threeIsFavored" ng-change="SelectedANumber()">3
    <br/>
  </div>
  <br/>Colors Selected:
  <br/>Red: {{redIsFavored}}
  <br/>Yellow: {{yellowIsFavored}}
  <br/>Blue: {{blueIsFavored}}
  <br/>
  <br/>Numbers Selected:
  <br/>1: {{oneIsFavored}}
  <br/>2: {{twoIsFavored}}
  <br/>3: {{threeIsFavored}}
  <br/>

</body>

</html>

A working example can be found Here

Upvotes: 1

Related Questions