Hi all,
这里我创建了选项卡示例。我真正需要的是，在这个示例中，我正在通过输入任何内容进行验证，单击提交，焦点将转到无效文本，该文本工作正常，但一旦选项卡第一个完全有效，则需要切换到第二个并设置焦点不起作用如何为了实现这一目标，任何人都可以帮助我......
引用:- 没有填充任何东西都可以正常工作
填写后每次点击提交都需要跳转并检查验证。
类似这样的事情
最佳答案
这是您问题的解决方案，看看这个，我使用了广播方法来从 Controller 到指令的调用方法，但它可以变化，我们也可以使用不同的方法从 Controller 调用指令方法。这样我们就可以更改事件选项卡。
JS文件
angular.module('components', []).
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {
paneNum : '='
},
controller: [ "$scope", function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
$scope.$on('changeText',function(event, data){
var j = 0;
angular.forEach(panes, function(pane) {
j++
pane.selected = false;
if(j==data.id)
{
pane.selected = true;
}
});
});
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
}],
template:
'<div class="tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
'</li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
replace: true
};
}).
directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
'</div>',
replace: true
};
})
.controller('sample', function($scope,$rootScope){
$scope.activeTab = 1;
$scope.Submit = function(){
var schema = {
1:["FirstName","MiddleName","LastName"],
2:["Contact","Address1","Address2"],
3:["Phone","Mobile","Mobile1"]
};
var valid = true;
angular.forEach(schema[$scope.activeTab],function(v){
if(!$scope.myForm[v].$valid)
{
valid = false;
}
});
if(valid)
{
$scope.activeTab++;
}
$rootScope.$broadcast('changeText',{id :$scope.activeTab});
}
});
HTML 文件
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="components" ng-controller="sample">
<h3>BootStrap Tab Component</h3>
<form role="form" ng-controller="sample" name="myForm">
<tabs>
<pane id="FirstTab" title="First Tab">
<div><div class="form-group">
<label for="text">First Name</label>
<input type="text" name="FirstName" required ng-model="FirstName" class="form-control" id="FirstName">
</div>
<div class="form-group">
<label for="text">Middle Name</label>
<input type="text" name="MiddleName" required ng-model="MiddleName" class="form-control" id="MiddleName">
</div>
<div class="form-group">
<label for="text">Last Name</label>
<input type="text" name="LastName" required ng-model="LastName" class="form-control" id="LastName">
</div>
</div>
</pane>
<pane id="SecondTab" title="Second Tab">
<div>
<div class="form-group">
<label for="text">Contact</label>
<input type="text" name="Contact" required ng-model="Contact" class="form-control" id="Contact">
</div>
<div class="form-group">
<label for="text">Address1</label>
<input type="text" required name="Address1" ng-model="Address1" class="form-control" id="Address1">
</div>
<div class="form-group">
<label for="text">Address2</label>
<input type="text" required name="Address2" ng-model="Address2" class="form-control" id="Address2">
</div>
</div>
</pane>
<pane id="ThirdTab" title="Third Tab">
<div>
<div class="form-group">
<label for="text">Phone</label>
<input type="text" required name="Phone" ng-model="Phone" class="form-control" id="Phone">
</div>
<div class="form-group">
<label for="text">Mobile</label>
<input type="text" required name="Mobile" ng-model="Mobile" class="form-control" id="Mobile">
</div>
<div class="form-group">
<label for="text">Mobile1</label>
<input type="text" required name="Mobile1" ng-model="Mobile1" class="form-control" id="Mobile1">
</div>
</div>
</pane>
<pane id="FourthTab" title="Fourth Tab">
<div>This is the content of the Fourth tab.</div>
</pane>
</tabs>
<button type="submit" ng-click="Submit()" class="btn btn-default">Submit</button>
</form>
</body>
</html>
关于javascript - 如何在 angularjs 中设置下一个选项卡的焦点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35453594/