Javascript 复选框按钮不工作

我正在使用一组复选框作为引导按钮，以便有一个不同的样式，而不是传统的复选框。代码如下：

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

问题是，当我单击按钮时，

ng model

不会更新，就像复选框根本不存在一样。 我甚至在我的页面上有

ng型号的代码，但它什么也没有：

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

value1={{study\u area}}


我是不是遗漏了什么。顺便说一句，我使用的是Bootstrap3.3.7。谢谢。
您正在使用角度指令。您正在加载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>


{{choice.label}

我写这篇文章时没有测试，也不知道您使用的是哪个版本的angular。请记住，angular代码的语法在这里和那里都发生了变化。但是，您应该了解如何改进代码。
我已经创建了一个运行良好的小提琴。唯一的区别是我已经注入了AngularUI引导

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

看起来像是你想做的

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

不能对多个复选框使用相同的id，因为id对于整个文档是唯一的。如果它们相关，则将标识符用作类名或名称属性。请阅读规范：@scrasedcola我已将其放在类名中，但问题仍然存在。与其显示您复选框的css，不如为您的模型提供代码，因为您声明问题在于模型更新？@scrasedcola我最终更新了代码。我只是在打印我的模型，但它没有显示任何东西。是的，你的小提琴可以工作，但奇怪的是，我已经在我的主模块上注入了它…这取决于当时使用的版本。您使用的是什么版本？发布完整的代码，以防出现其他问题。我正在使用Angular 1.6.1和Bootstrap 3.3.7。尽管如此，我删除了
data toggle=“buttons”
，复选框开始工作，但勾号再次出现。我已经更新了小提琴，只使用Angular 1.6.1和Bootstrap 3.3.7，一切正常。你还没有发布你的代码。也许这与初始化角度代码的方式有关？发布您的角度代码。您需要什么文件？如果需要进一步帮助，请在问题中添加角度控制器/指令逻辑。
var app = angular.module('myapp', ['ui.bootstrap']);