Checkbox button does not work

Question

I'm using a set of checkboxes as Bootstrap buttons, so as to have a different style instead of the traditional checkboxes. Here is the code:

    <div class="btn-group" data-toggle="buttons">

        <label class="btn btn-primary" id="area_selection_checkbox">
            <input type="checkbox" ng-model="study_area.a" ng-true-value="'design'" autocomplete="off"/> Design
        </label>

        <label class="btn btn-primary" id="area_selection_checkbox">
            <input type="checkbox" ng-model="study_area.b" ng-true-value="'economics'" autocomplete="off"> Economics
        </label>

        <label class="btn btn-primary" id="area_selection_checkbox">
            <input type="checkbox" ng-model="study_area.c"  ng-true-value="'management'" autocomplete="off"> Management
        </label>

        <label class="btn btn-primary" id="area_selection_checkbox">
            <input type="checkbox" ng-model="study_area.d" ng-true-value="'marketing'" autocomplete="off"> Marketing
        </label>

        <label class="btn btn-primary" id="area_selection_checkbox">
            <input type="checkbox" ng-model="study_area.e" ng-true-value="'software engineering'" autocomplete="off"> Software engineering
        </label>

        <label>
            <input type="checkbox" ng-model="softskill_filter.e" ng-true-value="'creativity'"/>
            Creativity
        </label>

<tt>value1 = {{study_area}}</tt><br/>
    </div>

Note that the only checkbox that isn't classed or has ID is the only one that works... And the CSS for the buttons:

#area_selection_checkbox {
  border-radius: 0;
  width: 200px;
  margin: 1px;
  display: block;
  cursor: pointer;
  background-color: #EDF1F5;
  border-color: #EDF1F5;
  color: #787985;
  font-weight: 500;
  outline: none !important;
  padding: 10px 12px;
  border: none;
}


#area_selection_checkbox.active, #area_selection_checkbox:active,
  #area_selection_checkbox.active:hover, #area_selection_checkbox:active:hover{
    background-color: #787985;
    border-color: #787985;
    color: #FFFFFF;
}

#area_selection_checkbox:hover, #area_selection_checkbox:focus {
  background-color: #E1E6ED;
  border-color: #E1E6ED;
  color: #787985;
}

The thing is, when I click the buttons, the ng-model does not update, like the checkbox wasn't even there. I even have the code for the ng-model on my page, but it does nothing:

 <tt>value1 = {{study_area}}</tt><br/>

Am I missing something here. Btw, I'm using Bootstrap 3.3.7. Thank you.

Answer 1

You are using angular directives. Are you loading angular.js? There is no need disable autocomplete on checkboxes - omit that. Have a look at ng-repeat since you are creating duplicate code in your template.

Inside your angular controller have your choices defined

this.currentChoice = 'a';
this.availableChoices = [{
        id: 'choice-a',
        label: 'Choice A',
        value: 'a'
    }, {
        id: 'choice-b',
        label: 'Choice B',
        value: 'b'
    }
];

Then in your template do something like this:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary" id="{{choice.id}}" ng-repeat="choice in ctrl.availableChoices">
         <input type="checkbox" ng-model="ctrl.currentChoice" ng-true-value="'{{choice.value}}'"/> {{choice.label}}
    </label>
</div>

I wrote this without testing or knowing which version of angular you are using. Keep in mind that the syntax of angular code changed here and there. But you should get the idea of how to improve your code.

Answer 2

I've created a fiddle that appears to work fine. The only difference is that I have injected angular-ui-bootstrap

var app = angular.module('myapp', ['ui.bootstrap']);

which looks like what you were trying to do.

Is this what you were trying to achieve?

fiddle here