使用BootStrap和Angular -动态选择输入

Using BootStrap and Angular - Dynamically selecting input

本文关键字：动态 选择 输入 Angular BootStrap 使用      更新时间：2023-09-26

我想做的是有两个单独的图，graph1和graph2，在每个图中，它们将包含自己的一组过滤器选择。两个图的选项是相同的。

当用户为图形选择过滤器时，它将保存到该图形集的selectedData中，当用户取消选择它时，它将从selectedData中删除它。

如果用户想在graph1和graph2之间切换，他们可以在顶部面板上选择他们想要的图形。

我想要发生的是，按钮将根据图中的selectedData被选中或不选中。我不确定如何设置基于selectedData的复选框，而引导正在使用。

我想我可能要模拟点击，但我不知道如何去做这个，或者可能有一个更好的方法。最好使用相同或类似的bootstrap外观。

我用我正在做的模板做了一个活塞。

主要工作示例:http://plnkr.co/edit/Vj3o05NXbWfFKgA6RhcG

不工作示例:使用ng-repeat.

当我使用ng-repeat

时，它似乎不能工作。http://plnkr.co/edit/sGJUPcHjXnPsBfW6wk0G

你是否可以使用Angular UI引导(http://angular-ui.github.io/bootstrap/)?常规的引导复选框不适合angular。我修改了你的柱塞，并添加了你想要的普通复选框，但你可以看到，bootstrap复选框不能正确地与Angular模型交互。

http://plnkr.co/edit/bUxMcTord3UPpTOY7SmS

还要注意，你忘了在你的plunker中设置你的angular应用和控制器:

<html ng-app="app">

和

<body ng-controller="AdvancedCtrl">

为每个图形设置一个控制器，每个图形都有自己的作用域，以跟踪它们自己的状态。

这是一个来自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>

这里是根据你的需要修改的

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

如果你想让它是动态的，你可以使用ng-repeat指令的标签和标签的内容。

<!-- 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>
相关文章：