Question

我目前正在开发一款应用，我正在尝试将具有特定值的单选按钮发送回服务器。在插入data-toggle =＆＃34;按钮之前，我控制台注销了该值＆＃34;我能够查看price.label的价值。虽然，只要我放置data-toggle =＆＃34;按钮＆＃34;在视图中，控制台日志变为空。

<div class="form-group">    
  <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary btn-lg {{price.color}}" ng-repeat="price in shares.prices">
    <input type="radio"  name="report" ng-model="item.report_pricing" value="{{price.value}}"> {{price.label}}</label>
  </div>
</div>

我将非常感谢您如何解决这个问题。

Answer 1

与AngularJs一起使用bootstrap时存在一些已知问题，特别是当您尝试将Bootstrap JavaScript组件引入Angular项目时。

有几个UI引导程序模块可以使引导程序和AngularJs通过指令无缝地使用。他们已经为您解决了这些问题。

https://angular-ui.github.io/bootstrap/

您可以通过执行以下操作将ui-boostrap模块添加到角度应用中...

<script src="../angular-bootstrap/0.8.0/dist/ui-bootstrap-tpls-0.8.0.min.js"></script>

按以下方式将模块注入AngularJS应用程序......

(function() {
        'use strict';

        /* App Module */

        angular.module('myApp', [
            'myApp.core'
            'myApp.services',
            'myApp.directives'
        ]);

    })();




(function() {
        'use strict';

        angular.module('myApp.core', [
            /*
             * Angular modules
             */
            'ngAnimate',
            'ngRoute',
            'ngSanitize',
            /*
             * Our reusable cross app code modules
             */
            'blocks.exception',
            'blocks.logger',
            'blocks.router',
            'myApp.services',
            'myApp.directives',
            /*
             * 3rd Party modules
             */
            'ui.bootstrap'
        ]);
    })();

然后只需使用ui-module标签即可。这里的例子.... http://plnkr.co/edit/?p=preview https://angular-ui.github.io/bootstrap/

Answer 2

这是解决方案，我最终用于解决我的问题。由于我无法使用数据切换，因此我使用了Angular UI Bootstrap - https://angular-ui.github.io/bootstrap/。我也无法使用btn-radio的动态值，因此我删除了ng-repeat并手动输入了值。虽然，我能够让其他一切充满活力。这最终完全解决了我的问题。对于拥有非常大的btn组的人来说可能不适用。

<div class="btn-group">
    <label class="btn btn-gray btn-lg withoutpricing-gray" ng-model="item.report_pricing" btn-radio="'none'">{{prices.0.label}}</label>
    <label class="btn btn-gray btn-lg renter-blue" ng-model="item.report_pricing" btn-radio="'renter'">{{prices.1.label}}</label>
    <label class="btn btn-gray btn-lg owner-purple" ng-model="item.report_pricing" btn-radio="'owner'">{{prices.2.label}}</label>
    <label class="btn btn-gray btn-lg combined-orange" ng-model="item.report_pricing" btn-radio="'both'">{{prices.3.label}}</label>
</div>

AngularJS在数据切换时不发送动态数据=＆＃34;按钮＆＃34;在div类

2 个答案: