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

标签 javascript jquery angularjs twitter-bootstrap

我想要做的是有两个独立的图表,graph1 和 graph2,并且在每个图表中它们将包含自己的一组过滤器选择。两个图表之间可供选择的选项是相同的。

当用户为图表选择过滤器时,它会将其保存到 selectedData 的图表集中,当用户取消选择它时,它会将其从 selectedData 中删除。

如果用户想要在 graph1 和 graph2 之间进行更改,他们可以在顶部面板上选择所需的图表。

我想要发生的是,将根据要更改为的图表中的 selectedData 来选中或取消选中按钮。我不确定如何在使用 Bootstrap 时根据 selectedData 设置复选框。

我想我可能必须模拟一次点击,但不确定如何去做,或者可能有更好的方法。最好使用相同或相似的 Bootstrap 外观。

我用我正在做的事情的模板制作了一个 plunker。

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

不起作用示例:使用 ng-repeat。

当我使用 ng-repeat 时,我似乎无法让它工作

http://plnkr.co/edit/sGJUPcHjXnPsBfW6wk0G

最佳答案

您可以改用 Angular UI bootstrap (http://angular-ui.github.io/bootstrap/)吗?常规的 Bootstrap 复选框不能很好地与 Angular 配合使用。我修改了您的 plunker 并添加了正常的复选框来执行您想要的操作,但是您可以看到 Bootstrap 复选框无法与 Angular 模型正确交互。

http://plnkr.co/edit/bUxMcTord3UPpTOY7SmS

另请注意,您忘记在 plunker 中设置 Angular 应用程序和 Controller :

<html ng-app="app">

<body ng-controller="AdvancedCtrl">

关于javascript - 使用 BootStrap 和 Angular - 动态选择输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23732944/

相关文章:

javascript - Div 出现在 > 900px 滚动并停在页脚 div

javascript - 如何在 Instagram 上找到当天最受欢迎的图片?

javascript - jQuery - 如果未禁用,则仅选择元素

javascript - Angular Directive(指令)绑定(bind)

java - 将路径变量发送到 REST API

javascript - 接收 JSON 格式的图像数据并将其注入(inject) DOM

javascript - 如何在javascript中回到数组的开头

php - 在 iFrame 上打开链接 - PHP 或 JQuery

javascript - 在 Img 上悬停在另一个 div 中显示文本

angularjs - Angular : using $rootScope. $on vs $scope.$on 捕获组件中的 $rootScope.$broadcast – 在性能方面哪个更好?