我是 AngularJS 的初学者,我有一个带有 2 个选项卡的 bootstarp 模式,我让它一次只显示一个选项卡。在模式中,我有两个按钮“下一个”和“上一个”,我可以在选项卡之间切换通过这些按钮。但问题是当我更改选项卡时,各自选项卡中的内容不会更改。我哪里出错了。请帮助我。
<div class="modal-body">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>{{current.data}}</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<textarea class="form-control" ng-model="first" name="first" required></textarea>
<md-button class="md-raised md-primary" ng-click="next()">next</md-button>
<md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
</div>
<div class="tab-pane" id="tab2">
<textarea class="form-control" ng-model="second" name="second" required></textarea>
<md-button class="md-raised md-primary" ng-click="next()">next</md-button>
<md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
</div>
</div>
</div>
Controller.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dataSet = [
{ data: "First", index: 0 },
{ data: "Second", index: 1 }
],
$scope.current = $scope.dataSet[0],
$scope.next = function() {
var i = $scope.getIndex($scope.current.index, 1);
$scope.current = $scope.dataSet[i];
},
$scope.previous = function() {
var i = $scope.getIndex($scope.current.index, -1);
$scope.current = $scope.dataSet[i];
},
$scope.getIndex = function(currentIndex, shift) {
var len = $scope.dataSet.length;
return (((currentIndex + shift) + len) % len)
}
});
最佳答案
我已使用您所选数据的 ng-class
属性更新了您的代码,请参阅 https://jsfiddle.net/jasonantho/fwowg8q5/
关于javascript - 如何显示引导模式选项卡的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45919255/