Question

我正在编写一个AngularJS应用程序并与bootstrap的js一起遇到了一个问题。如果我希望下面的按钮按照它们的方式运行（单击时添加“活动”类并且是独占的）那么我需要bootstrap的JS。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
         <input type="radio" value="one" ng-model="myData[$index].number"> one
    </label>    
    <label class="btn btn-primary">
        <input type="radio" value="two" ng-model="myData[$index].number"> two                                                            
    </label>    
</div>

问题是，当我使用bootstrap的JS时，ng-model似乎停止工作，并且我的变量中没有显示数据。

但是，当我删除bootstrap的JS时，ng-model按预期工作，但按钮不能正常工作。

我尝试用angular's ui bootstrap JS替换bootstrap.js但结果相同。我可能只是误解了使用bootstrap的JS？

This是按钮的预期行为。当我使用angularJS时，这不起作用。不幸的是，bootstrap的JS需要jQuery ......

任何帮助表示赞赏，

感谢

Answer 1

如果您想以bootstrap的指令方式使用Angular，请使用UI Bootstrap。我预测，你想在单击按钮时调用一些function？尽量不要使用Bootstrap的方式，使用Angular的方式。那是ng-click。例如，在您的HTML代码中：

<label class="btn btn-primary">
     <input type="radio" value="one" ng-model="myData[$index].number" ng-click="call(myData[$index].number)"> one
</label>

您的controller范围应该是某种形式：

.controller('myCtrl', function ($scope) {
  $scope.myData = [*your array here*];
  $scope.call = function(param){
    console.log(param); //your 'myData' index should be printed in console, for example
  };
})

此外，如果使用ng-repeat，您创建输入列表的方式会更有效，就像：

<!-- content is inside of 'myCtrl' scope -->
<div class="btn-group" data-toggle="buttons" ng-bind="Example.radioGroup">
    <label class="btn btn-primary" ng-repeat="n in radioGroup">
         <input type="radio" value="{{n.number}}" ng-model="n.number"> {{n.text}}
    </label>
</div>

假设您的型号有＆＃39;编号＆＃39;和＆＃39;文字＆＃39;属性，将其替换为radioGroup模型中现有的内容，以便在前端显示您的数据。但是如果你从不使用ng-repeat并且现在不能使用它，它可以在以后加强。

Answer 2

我之前也遇到过这种情况。您需要做的是使用适合存储模型数据的.factory()配方，并在您的范围内相应地绑定事物......无论是指令还是控制器。

然后在你的标记中，如果你本身不在控制器或指令的范围内，你可以使用ng-bind绑定东西。

   <!-- content is inside of 'myCtrl' scope -->
    <div class="btn-group" data-toggle="buttons" ng-bind="Example.radioGroup">
        <label class="btn btn-primary">
             <input type="radio" value="one" ng-model="radioGroup[$index].number"> one
        </label>    
        <label class="btn btn-primary">
            <input type="radio" value="two" ng-model="radioGroup[$index].number"> two                                                            
        </label>    
    </div>

确保将工厂注入您的工作范围。这是一个这样的工厂的例子：

myApp.factory('radioFactory', function(){
   return {
       radioGroup: {
           number:["one","two"]
       }
    }
})

myApp.controller ('myCtrl', function($scope,radioFactory){
    $ scope.Example = radioFactory;
})

Answer 3

您应该使用角度版本的Bootstrap按钮组件。我推荐UI Bootstrap或AngularStrap个项目。

AngularJS使用bootstrap的JS

3 个答案: