使用BootStrap和角度 - 動態選擇輸入

我想要做的是有兩個單獨的圖形graph1和graph2，並且在每個圖形中它們將包含它們自己的一組過濾器選擇。兩個圖表中的選項可供選擇。使用BootStrap和角度 - 動態選擇輸入

當用戶爲圖表選擇一個過濾器時，它會將其保存到selectedData的圖表集合中，當用戶取消選擇它時，它將從selectedData中移除它。

如果用戶想要在graph1和graph2之間切換，他們可以在頂部面板上選擇他們想要的圖表。

我想要發生的是，將基於它正在更改爲圖中的selectedData選中或取消選中按鈕。我不確定如何在啓動時使用基於selectedData的複選框。

我想我可能不得不模擬點擊，但不知道如何去做這件事，或者可能有更好的方法。最好使用相同或相似的引導程序外觀。

我已經做了一個模板，我正在做一個plunker。

天色工作實例： http://plnkr.co/edit/Vj3o05NXbWfFKgA6RhcG

不工作示例：使用NG-重複。

我似乎無法得到它的工作當我使用NG-重複

http://plnkr.co/edit/sGJUPcHjXnPsBfW6wk0G

來源

2014-05-19 user2469515

是否有可能使用Angular UI引導代替（http://angular-ui.github.io/bootstrap/）？常規的引導程序複選框不能很好地使用角度。我修改了你的plunker並添加了正常的複選框，但是你可以看到bootstrap複選框不能與Angular模型正確交互。

http://plnkr.co/edit/bUxMcTord3UPpTOY7SmS

另外請注意，你忘了把角的應用程序和控制器在plunker：

<html ng-app="app">

和

<body ng-controller="AdvancedCtrl">

來源

2014-05-19 09:29:50

謝謝，我會去改變它的角引導:)我會標記爲答案，如果我能得到它的工作:) – user2469515

嘿，我又增加了兩個強盜，一個是一個工作的例子。但我似乎無法得到它的工作，當我想在第二個例子 – user2469515

ng-repeat設置ng模型明白了:)謝謝 – user2469515

對它們有自己的範圍，以跟蹤自己的狀態的每個圖形控制器。

這是一個標籤例如從bootstrap 3主頁。

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

這裏如果你希望它是動態的，你可以使用ng-repeat指令與標籤和標籤內容被修改，以您的需求

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

。

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

來源

2014-05-19 08:44:12 furier

我怎麼能動態地選擇和取消基於過濾器按鈕在圖上？或者你是否說有兩套過濾器按鈕，只是讓一個可見而另一個不可見？ – user2469515

@ user2469515您將擁有每個標籤內容的按鈕......但您無需隱藏並顯示它們，這將被照顧到引導標籤組件。 – furier

使用BootStrap和角度 - 動態選擇輸入

回答

相關問題