AngularJS how to get boolean value

Question

I'm trying to find out if one or both of the 2 colour checkboxes is selected, and depending on which one/pair is selected, objects of that colour will be outputted on the form. So if a user checked the "purple" check box then there will be a bunch of purple objects outputted to the form. If "purple" and "yellow" are both checked both purple and yellow objects will be outputted onto the screen. I've been trying to check if the checkbox is "true" to see if it selected but there is something wrong with my logic. http://codepen.io/MarkBond/pen/pJmrxV?editors=101 Thanks in advance

HTML

<html ng-app="formApp">

<head>
    <!-- CSS -->
    <!-- load up bootstrap and add some spacing -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <style>
        body         { padding-top:50px; }
        form         { margin-bottom:50px; }
   </style>

   <!-- JS -->
   <!-- load up angular and our custom script -->
       <script src="http://code.angularjs.org/1.3.14/angular.js"></script>
       <script src="app.js"></script>
</head>

    <!-- apply our angular app and controller -->

<body ng-controller="FormController as formCtrl">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1">

         <h2>Angular Checkboxes</h2>

         <form>
             <div class="checkbox">
                 <label>
                     <input type="checkbox" name="displayOption" ng-model="formData.displayOption.purple" ng-click="yourFunction()" />purple
                 </label>
             </div>
             <div class="checkbox">
                 <label>
                     <input type="checkbox" name="displayOption" ng-model="formData.displayOption.yellow" ng-click="yourFunction()" />yellow
                 </label>
             </div>
         </form>
         <h2>Array/Message Output Area</h2>
         <pre>
             <div ng-repeat="object in formCtrl.objects">
                  {{ object.name }}
             </div>
             {{ message }}
         </pre>
         <!-- SHOW OFF OUR FORMDATA OBJECT -->
         <h2>Boolean Test Area</h2>
         <pre>
            {{ formData }}
         </pre>
        </div>
    </body>
</html>

AngularJS

angular.module('formApp', [])
    .controller('FormController', ['$scope' ,function($scope) {

  $scope.formData = {};

  $scope.yourFuction = function(){

    var purple = $scope.purple;
    var yellow = $scope.yellow;

    if (purple === true && yellow === true) {
        this.objects = groupOne
    } else if (purple === true) {
        this.objects = groupTwo
    } else if (yellow === true) {
        this.objects = groupOne + groupTwo
    }else{
        this.message = 'Nothing Selected'
    }
  };

    var groupOne = [
      { name: 'Grape'},
      { name: 'Wine'},
      { name: 'Toy Octipus'}
    ]

    var groupTwo = [
      { name: 'Banana'},
      { name: 'Lemon'},
      { name: 'Yellow Highlighter'}
    ]
}]);

Mike · Accepted Answer · 2015-08-17 20:49:31Z

3

$scope.yourFuction should be $scope.yourFunction and for your if statements you should be checking for $scope.formData.displayOption.purple instead of $scope.purple

var purple = $scope.formData.displayOption.purple;
var yellow = $scope.formData.displayOption.yellow;

http://codepen.io/anon/pen/LVozZG?editors=101 https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

edited Aug 17, 2015 at 20:49

answered Aug 17, 2015 at 20:44

Mike

1991 gold badge2 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS how to get boolean value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related