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 reletivly new to angular so im 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. The content should be dynamic so if i choose a different check box the array will change as well.
HTML
<form name="selectionForm" ng-controller="ActionController">
<table class="table table-striped">
<thead>
...nothing important in here
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" ng-model="checkboxModel.value1"/>50 million
<button rel="popover" type="button" class="close hoverMessage" data-dismiss="modal" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
<span class="fa fa-info-circle"></span>
</button>
</label>
</div>
</td>
<td rowspan="5">
<div style="text-align:center" ng-repeat="ActionController as actionCtrl">
<a href="@Url.Action("{{ page.name }}", "Dashboards")">{{ page.name }}</a>}
{{ message }}
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" ng-model="checkboxModel.value2"/>100 million
<button rel="popover" type="button" class="close hoverMessage" data-dismiss="modal" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
<span class="fa fa-info-circle"></span>
</button>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox" value="status" id="selectionProgram" ng-model="checkboxModel.value3"/>Status Quo
<button rel="popover" type="button" class="close hoverMessage" data-dismiss="modal" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
<span class="fa fa-info-circle"></span>
</button>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox" value="nothing" id="selectionTreatment" ng-model="checkboxModel.value4"/>Do Nothing
<button rel="popover" type="button" class="close hoverMessage" data-dismiss="modal" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
<span class="fa fa-info-circle"></span>
</button>
</label>
</div>
</td>
</tr>
</tbody>
</table>
</form>
I cut out all the stuff that wouldn't be relevant so if the table seems a weird shape that is why
AngularJS
app.controller('ActionController', function() {
var value1 = element(by.binding('checkboxModel.value1'));
var value2 = element(by.binding('checkboxModel.value2'));
var value3 = element(by.binding('checkboxModel.value3'));
var value4 = element(by.binding('checkboxModel.value4'));
if(value1 === checked || value2 === checked){
this.page = groupOne
}else if(value3 === checked){
this.page = groupTwo
}else if(value1 === checked || value2 === checked && value3 === checked){
this.page = groupThree + groupOne + groupTwo
}else{
this.message = 'No Options'
}
});
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'}
]
Aucun commentaire:
Enregistrer un commentaire