I have 4 check boxes, and depending on which one/pair is selected I want a specific array to be displayed on the page. I'm relatively new to angularjs so I'm not sure how to get this to work. So how do I a) check which check box is selected through angular, b) print out the specific array, and c) if "Do Nothing" is selected a message will appear instead of the array. The content should be dynamic so if i choose a different check box the content will change as well. http://codepen.io/MarkBond/pen/gpJWKe?editors=101 the "Simple Form Object" is just to show what that current boolean value is not the array of names that are supposed to appear.
HTML
<html ng-app="myApp"> ..... <body ng-controller="FormController"> <form> <div class="checkbox"> <label> <input type="checkbox" name="displayOption" ng-model="formData.displayOption.fiftyMill"/>50 million </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="displayOption" ng-model="formData.displayOption.hundredMill" />100 million </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="displayOption" ng-model="formData.displayOption.statusQuo"/>Status Quo </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="displayOption" ng-model="formData.displayOption.doNothing"/>Do Nothing </label> </div> <div ng-repeat="ActionController as actionCtrl"> <a>{{ page.name }}</a> {{ message }} </div> </form> </body> </html> AngularJS
angular.module('myApp', []) .controller('FormController', ['$scope' ,function($scope) { // Just for outputting data $scope.formData = {}; // Trying to place the boolean value of each checkbox into a variable var value1 = '$scope.fiftyMill'; var value2 = '$scope.hundredMill'; var value3 = '$scope.statusQuo'; var value4 = '$scope.doNothing'; // Checks to see which checkbox is selected then outputting array // associated with selection if (value1 === true || value2 === true) { this.page = groupOne } else if (value3 === true) { this.page = groupTwo } else if (value1 === true || value2 === true && value3 === true) { this.page = groupThree + groupOne + groupTwo }else{ this.message = 'No Options' } // Array gtoups var groupOne = [ { name: 'BudgetCharts'}, { name: 'BudgetComparison'}, { name: 'EDITBudgetAmounts'} ] var groupTwo = [ { name: 'Optimize'}, { name: 'ReviewAndAdjust'} ] var groupThree = [ { name: 'Export'}, { name: 'Import'}, { name: 'Construction Program'}, { name: 'ExportStrategies'} ] }]); Updated question with how my current code works also with a workable codepen
