【发布时间】:2015-06-27 12:16:36
【问题描述】:
我正在尝试使用这样的角度引导选项卡:
<div >
<tabset>
<tab ng-repeat="t in tabs">
<tab-heading>{{t.title}} <a ng-click="removeTab($index)" href='#Evaluation'><i class="glyphicon glyphicon-remove-sign"></i></a></tab-heading>
<!-- <div ng-bind='t.content'></div> -->
</tab>
</tabset>
</div>
<div id="Informations">Infos</div>
<div id="Evaluation">Evaluation</div>
js 是:
monAppli.controller("Controleur", function ($scope) {
$scope.tabs = [{
title: "Informations",
content: '<h1>tab one</h1>'
}, {
title: "Evaluation",
content: '<h1>tab two</h1>'
}, {
title: "Projets",
content: '<h1>tab three</h1>'
}, {
title: "Notes",
content: '<h1>tab 4</h1>'
}
];
$scope.removeTab = function (index) {
$scope.tabs.splice(index, 1);
};
});
但是href链接不起作用,它没有单独显示每个div。有人知道吗?万分感谢 单击选项卡时应该显示z div“评估”,但它什么也不显示。
我也试过这个:
<div >
<tabset>
<tab ng-repeat="t in tabs">
<tab-heading>{{t.title}} <a ng-click="removeTab($index)" data-target="#{{t.title}}"><i class="glyphicon glyphicon-remove-sign"></i></a></tab-heading>
<!-- <div ng-bind='t.content'></div> -->
</tab>
</tabset>
</div>
<div id="Informations">Infos bla bla bla</div>
<div id="Evaluation">try bla bla bla</div>
那里有一个小提琴http://jsfiddle.net/alfrescian/ZE9cE/
但它没有显示如何显示与一个选项卡相关的一个 div。
【问题讨论】:
-
非常感谢 Ted 的帮助,最后添加了你的代码,还查看了 angular-ui.github.io/bootstrap 并且它有效
标签: javascript html angularjs twitter-bootstrap