Question

Example File Link

Hi all,

这里我为标签创建了示例。我真正需要的是，在这个示例中我正在进行验证，输入任何单击提交焦点将转到无效文本，这是正常工作但一旦选项卡一完全有效，那时它需要切换到第二个并设置焦点不工作如何为实现这一点，任何人都可以帮助我...

参考： - 没有填写任何正常工作

填写每次点击提交后，需要跳转并检查验证。

类似这样的事情

Answer 1

这是你的问题的解决方案看看这个，我已经使用广播方法从一个调用方法从控制器到指令但它可以变化我们也可以使用不同的方法从控制器调用指令方法。这样我们就可以更改活动标签了。

Here is the working plnkr

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>

如何为angularjs中的下一个标签设置焦点？

1 个答案: