Bootstrap选项卡Active/inactive和Angularjs
Bootstrap tab Active/inactive and Angularjs
我在这里使用Angularjs和Bootstrap选项卡我的代码:
<body ng-controller="TabsCtrl">
<button ng-click="addNewWorkspace('jobs')">Open Tab jobs<i class="icon-plus-sign"></i></button>
<button ng-click="addNewWorkspace('invoices')">Open Tab invoices<i class="icon-plus-sign"></i></button>
<button ng-click="addNewWorkspace('payments')">Open Tab payments<i class="icon-plus-sign"></i></button>
<ul class="nav nav-tabs">
<li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab">
<a href="{{tab.link}}" ng-click="setSelectedTab(tab)">{{tab.label}}
<button ng-click="removeTab($index)">-<i class="fa fa-times"></i></button>
</a>
</li>
</ul>
<div ng-view></div>
</body>
当我按下任何按钮时,它都会打开一个新的选项卡,这里是我的第一个问题,该选项卡已创建但未激活,我需要按下创建的选项卡才能查看信息。
我的第二个问题是,当我打开任何选项卡并关闭时,该选项卡不会显示其他打开选项卡的信息。例如:我打开付款并打开此选项卡,当我关闭它时,它不会显示工作信息。
我做了什么?
当我添加/删除工作区以强制显示任何其他选项卡时,我尝试使用$location.path
,但这不起作用。此外,我还尝试了$window
,得到了相同的结果。
我不知道我是否混淆了这里的概念。
完整代码的实时演示
$scope.addNewWorkspace = function(page) {
var tab = {
link: '#/' + page,
label: page
};
$scope.tabs.push(tab);
$scope.selectedTab = tab;
$location.path('/' + tab.label);
};
选择当前选项卡作为所选选项卡
$scope.selectedTab=tab;
重定向到新位置
$location.path('/'+tab.label);
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- AngularJS:我可以跳过函数参数回调吗
- AngularJS UI路由器不能像ng路由器那样工作
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 如何包含特定于每个视图angularjs的javascript文件
- AngularJS:ng之后,重复$scope值未按预期更新
- AngularJS-在JSON选择器中使用变量名
- $window.ga在AngularJS事件中未定义
- AngularJS-使用'true'属性
- 打开一个模态并将其链接到AngularJS中的指令
- Angularjs代码未在匿名函数中运行
- angularjs+rails应用程序中未显示模板
- 我的AngularJS表达式没有'不起作用
- AngularJS JSON not arriving php
- 使用AngularJS中的筛选器更新给定的表
- Angularjs工厂注入错误
- AngularJS设计指南
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- 使用angularjs验证文本框中的电子邮件
- Bootstrap选项卡Active/inactive和Angularjs