AngularJS使用引导程序的JS

Question

我正在编写一个AngularJS应用程序，并与引导程序的js结合运行时遇到问题。 如果我想让下面的按钮按照他们应该的方式操作（点击时添加'active'类并且是独占的），那么我需要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> 

的问题是，当我用引导的JS，NG-模式似乎停止工作，并没有数据在我的变量中。

但是，当我删除引导程序的JS时，ng模型按预期工作，但按钮不按照他们应该的。

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

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

任何帮助表示赞赏，

感谢

Answer 1

您应该使用引导程序的按钮组件的角度版本。我推荐这些来自UI Bootstrap或AngularStrap项目。

Answer 2

我以前也遇到过。你需要做的是使用一个配方，它适合存储你的模型数据，并在你的示波器中相应地绑定东西......无论是指令还是控制器。

然后在你的标记中，如果你不是已经在控制器或指令的范围内原生地使用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> 

确保将您的工厂注入您的范围。如果你想使用bootstrap与Angular的指令方式，使用UI Bootstrap

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

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

Answer 3

：这里有一个这样的工厂的一个例子。我预测，你想在点击按钮时调用一些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> 

假设，如果你的模型有“数”和“文本”属性，有什么存在于你的radioGroup模型SH更换在前端收集数据。但是，如果您从不使用ng-repeat并且现在不使用它，那么稍后可以对其进行增强。