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
