angularjs引导多个按钮模型值答案

【问题标题】：angularjs bootstrap multiple button model valueangularjs引导多个按钮模型值
【发布时间】：2014-06-04 18:58:44
【问题描述】：

刚开始使用 angularjs 和 bootstrap。有一个显示按钮的示例。

             <div ng-controller="ButtonsCtrl">
                  <h4>Checkbox</h4>
                  <pre>{{checkModel}}</pre>
                  <div>
                      <button type="button" class="btn btn-primary" ng-click="checkModel.KateSpade = true" btn-checkbox>Kate Spade</label>
                      <button type="button" class="btn btn-primary" ng-model="checkModel.LouisVuitton" btn-checkbox>LouisVuitton</label>
                      <button type="button" class="btn btn-primary" ng-model="checkModel.Burberry" btn-checkbox>Burberry</label>
                      <button type="button" class="btn btn-primary" ng-model="checkModel.CalvinKlien" btn-checkbox>Calvin Klien</label>
                      <button type="button" class="btn btn-primary" ng-model="checkModel.Forever21" btn-checkbox>Forever 21</label>
                  </div>
             </div>

如何在点击时更新 ng-model 的值。我的控制器看起来很标准。

    app.controller('ButtonsCtrl', function($scope){
        console.log("ButtonsCtrl started");

        $scope.checkModel = {
            KateSpade: false,
            LouisVuitton: true,
            Burberry: false,
            CalvinKlien: false,
            Forever21: false
        };

   });

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

angular bootstrap UI 网站似乎使用了标签...您的 HTML 不正确。您有打开 button 标签和关闭 label 标签。此外，您的第一个按钮使用 ng-click 而不是 ng-model。在你的 HTML 中试试这个：

<div class="btn-group">
    <label class="btn btn-primary" ng-model="checkModel.KateSpade" btn-checkbox>Kate Spade</label>
    <label class="btn btn-primary" ng-model="checkModel.LouisVuitton" btn-checkbox>LouisVuitton</label>
    <label class="btn btn-primary" ng-model="checkModel.Burberry" btn-checkbox>Burberry</label>
    <label class="btn btn-primary" ng-model="checkModel.CalvinKlien" btn-checkbox>Calvin Klien</label>
    <label class="btn btn-primary" ng-model="checkModel.Forever21" btn-checkbox>Forever 21</label>
</div>

另外，请确保您包含并需要“ui.bootstrap”模块。 Fiddle 在这里。

【讨论】：