使用ngRoute使jquery tab使用angularjs不起作用
make jquery tab using ngRoute angularjs doesn't work
我尝试在标签1中添加项目,然后导航到下一个标签,当我回来的时候,事情会被重置。
http://plnkr.co/edit/ETxaZ2ESI9ftCOUSRDcP?p =
预览使用angular构建jquery TAB的最佳方法是什么?Ngshow和hide并不友好,因为它使视图变得复杂和混乱。
我建议使用AngularUI团队编写的Bootstrap组件。你可以找到一组很棒的Twitter Bootstrap组件,包括Tabs控件。
例子:
<div ng-controller="TabsDemoCtrl">
<p>Select a tab by setting active binding to true:</p>
<p>
<button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
<button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
</p>
<p>
<button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
</p>
<hr />
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
<hr />
<tabset vertical="true" type="navType">
<tab heading="Vertical 1">Vertical content 1</tab>
<tab heading="Vertical 2">Vertical content 2</tab>
</tabset>
<hr />
<tabset justified="true">
<tab heading="Justified">Justified content</tab>
<tab heading="SJ">Short Labeled Justified content</tab>
<tab heading="Long Justified">Long Labeled Justified content</tab>
</tabset>
</div>
js:
var TabsDemoCtrl = function ($scope) {
$scope.tabs = [
{ title:"Dynamic Title 1", content:"Dynamic content 1" },
{ title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
];
$scope.alertMe = function() {
setTimeout(function() {
alert("You've selected the alert tab!");
});
};
$scope.navType = 'pills';
};
实例:http://plnkr.co/edit/ExDYMWfK0FKgk0IDw47q?p=preview
相关文章:
- 使用AngularJS中的筛选器更新给定的表
- 使用angularjs验证文本框中的电子邮件
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 如何使用AngularJs禁用ng选项中的选项
- 我无法使用angularJs($http)访问服务器
- 如何更改<选择>使用angularJS从控制器获得的值
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 使用AngularJS中的UI路由器将状态重定向到默认子状态
- 使用angularjs中的rest调用通过id获取数据
- 显示&作为&在jsp中使用angularjs而不使用ng-bind-html
- 使用AngularJs时,如何在img标记具有src-attr时设置数据src
- 使用AngularJS从时间戳中获取工作日
- 使用angularjs ng Show/ng hide显示和隐藏不同的内容
- 使用angularjs列出JSON中的字段值
- 如何在范围值更改时使用 angularJs 更新 UI
- 如何使用AngularJS显示按钮或锚标记值
- 如何使用angularjs在iframe中嵌入来自数据库的视频链接
- 如何使用AngularJS在点击身体内部任何位置时显示弹出窗口
- 如何使用angularjs构建交互式滚动着陆页
- 如何使用angularJS从json的对象数组中显示和计数实体