Question

我使用一组复选框作为Bootstrap按钮，以便使用不同的样式而不是传统的复选框。这是代码：

    <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>

请注意，唯一没有分类或有ID的复选框是唯一有效的复选框... 按钮的CSS：

#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;
}

问题是，当我点击按钮时，ng-model不会更新，就像复选框一样。我甚至在我的页面上有ng-model的代码，但它什么也没做：

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

我在这里遗漏了什么。顺便说一句，我使用的是Bootstrap 3.3.7。谢谢。

Answer 1

您正在使用角度指令。你在加载angular.js吗？没有必要在复选框上禁用自动完成功能 - 省略它。看一下ng-repeat，因为你在模板中创建了重复的代码。

在角度控制器中，您可以选择

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

然后在您的模板中执行以下操作：

<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>

我在没有测试或知道您使用的角度版本的情况下写了这个。请记住，角度代码的语法在这里和那里发生了变化。但是你应该知道如何改进你的代码。

Answer 2

我创造了一个似乎很好的小提琴。唯一的区别是我注入了angular-ui-bootstrap

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

看起来就像你想要做的那样。

这是你想要达到的目标吗？

fiddle here

复选框按钮不起作用

2 个答案: