0

I am writing an AngularJS app and ran into an issue in combination with bootstrap's js. If I want the buttons below to act as they should (have 'active' class added when clicked and be exclusive) then I need bootstrap's 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>

The problem is, that when I use bootstrap's JS, ng-model seems to stop working and no data is shown in my variable.

However, when I remove the bootstrap's JS, ng-model works as expected but the buttons do not act as they should.

I tried replacing bootstrap.js with angular's ui bootstrap JS but with the same results. I am probably just misunderstanding the use of bootstrap's JS?

This is the expected behaviour of the buttons. When I use angularJS this doesn't work. Unfortunately bootstrap's JS requires jQuery ...

Any help appreciated,

thanks

3 Answers 3

2

If you want to use bootstrap with Angular's directive way, use UI Bootstrap. I predict, you want some function will be called when the button is clicked? Try not to use Bootstrap's way, use Angular's way. That is ng-click. For example in your HTML code:

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

And your controller's scope should be some kind of:

.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
  };
})

Also, your way to create a list of input can be more efficient if using ng-repeat, just like:

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

Assume if your model has 'number' and 'text' attribute, replace it with what's existing in your radioGroup model to show your data in front-end. But if you never use ng-repeat and won't use it now, it can be enhanced later.

Sign up to request clarification or add additional context in comments.

4 Comments

Thank you for your reply. I use ng-repeat all the time, the example I have is stripped of most real data. I used ui's bootstrap, but how to accomplish 'active' class for each clicked button in a group with exclusive behaviour? I thought bootstrap will handle this(that's the reason I'm using its JS). It would be easy to put 'active' to each button exclusively in jQuery with $(this), but here I'm not sure.
Do you want to set active class in some of your element when clicked? I have some approach, it's rather different for your case, but it's implementable. Check this stackoverflow.com/a/26499985/2793961 It's using ng-class instead of Bootstrap's approach. Ask me if it's not clearly enough.
my question aimed a bit differently. Thanks for your part, check the edit
I have a case like that. Maybe this can help. In your HTML: <div class="form-group"> <label class="col-sm-4 control-label">Stream Type</label> <div class="col-sm-8 btn-group"> <label class="btn btn-primary" ng-model="data.streamType" btn-radio="'in'">In</label> <label class="btn btn-primary" ng-model="data.streamType" btn-radio="'out'">Out</label> </div> </div> I'm using Angular and some of Bootstrap, but I don't use Bootstrap's JS at all.
1

I've run into thus before also. What you need to do is use a .factory() recipe thats' appropriate to store your model data, and bind things accordingly in your scope... whether that be a directive or a controller.

Then in your markup, you bind things using ng-bind if you arent already natively within the scope of a controller or directive.

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

Make sure to inject your factory into your scope. Here's an example of one such factory:

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

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

2 Comments

I dont't have a problem with binding currently, although this is a good example and I might use it in one of the other situations. The main problem is making the button stay 'active' when clicked on. (or did you give a solution for when I have bootstrap working and binding stops?)
oops, I burried the lead. What I found was that the issue was the use of ng-model. when I used ng-bind instead (which required rewiring some things), the twitter bootstrap button states worked as intended again. As a side bonus, this is what caused me to learn how to really model my angular apps, since that kind of data shouldn't be in a controller in most well built apps.
0

You should use an angular version of Bootstrap's button component. I recommend these from UI Bootstrap or AngularStrap projects.

2 Comments

I used UI bootstrap also, and wasn't able to make it work. Also, your first link goes to 404. I might try AngularStrap then, will get back at you
I'm glad that I could help. If this solves your problem completely, please mark the answer as accepted. Also, I've edited the 404 link.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.