Using BootStrap and Angular - Dynamically selecting input

Question

What I am trying to do is have two separate graphs, graph1 and graph2, and in each graph they will contain their own set of filter selections. The options to choose from are the same between the two graphs.

When a user selects a filter for a graph, it will save it to that graphs set of selectedData, when a user deselects it, it will remove it from the selectedData.

If a user wants to change between graph1 and graph2 they select which graph they want on the top panel.

What I am wanting to happen is that the buttons will be checked or unchecked based on the selectedData in the graph that it is being changed to. I am unsure how to set the checkboxes based on selectedData while bootstrap is being used.

I am thinking I may have to simulate a click, but am not sure how to go about this, or there may be a better way. Preferably using the same or similar bootstrap look.

I have made a plunker with a template of what I am doing.

Mostly Working Example: http://plnkr.co/edit/Vj3o05NXbWfFKgA6RhcG

Not working Example: Using ng-repeat.

I can't seem to get it working when i use ng-repeat

http://plnkr.co/edit/sGJUPcHjXnPsBfW6wk0G

mer10z_tech · Accepted Answer · 2014-05-19 09:29:50Z

1

Is it possible for you to use Angular UI bootstrap instead (http://angular-ui.github.io/bootstrap/)? The regular bootstrap check boxes don't play nicely with angular. I modified your plunker and added normal check boxes that do what you want, but you can see that the bootstrap checkboxes don't interact correctly with the Angular model.

http://plnkr.co/edit/bUxMcTord3UPpTOY7SmS

Also note that you forgot to set your angular app and controller in your plunker:

<html ng-app="app">

and

<body ng-controller="AdvancedCtrl">

answered May 19, 2014 at 9:29

mer10z_tech

6947 silver badges13 bronze badges

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

2 Comments

user2469515 Over a year ago

Thanks, I will have a go at changing it over to the Angular Bootstrap :) I'll mark as the answer if I can get it working :)

user2469515 Over a year ago

Hey, I added two more plunkers, one is a working example. But I can't seem to get it working when I am trying to set the ng-model with ng-repeat in the second example

furier · Accepted Answer · 2014-05-19 09:03:44Z

1

Have a controller for each graph which have their own scope to keep track of their own states.

Here is a Tabs example from the bootstrap 3 homepage.

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Here it is modified to your needs

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#graph1" data-toggle="tab">Graph 1</a></li>
  <li><a href="#graph2" data-toggle="tab">Graph 2</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="graph1" ng-controller="GraphsCtrl">...</div>
  <div class="tab-pane" id="graph2" ng-controller="GraphsCtrl">...</div>
</div>

If you want it to be dynamic you could use the ng-repeat directive with the tabs and tabs content.

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li ng-class="{active:$first}"><a href="#{{graph.id}}" ng-repeat="graph in graphs" data-toggle="tab">{{tabText}}</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div ng-class="{active:$first}" class="tab-pane" ng-repeat="graph in graphs" id="{{graph.id}}" ng-controller="GraphsCtrl">...</div>
</div>

edited May 19, 2014 at 9:03

answered May 19, 2014 at 8:44

furier

1,9771 gold badge22 silver badges39 bronze badges

2 Comments

user2469515 Over a year ago

How could I dynamically select and deselect the filter buttons based on the graph? Or are you saying to have two sets of filter buttons, and just make one visible while the other is invisible?

furier Over a year ago

@user2469515 you will have buttons for each tabs content... But you don't need to hide and show them, that will be taken care of the bootstrap tabs component.

Collectives™ on Stack Overflow

Using BootStrap and Angular - Dynamically selecting input

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related