vendredi 14 août 2015

AngularJS display array based off checkbox selection

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