Question

所以我一直试图弄清楚这一段时间，我看到一个类似于此但没有答案的帖子，所以我会尝试发布这个但是用一个plunkr作为一个例子。

所以问题是在加载时，我注意到ui-tab总是设置为Add Tab按钮。我想要做的是让ui-tab ng-repeat中的第一个元素处于活动状态，而不是静态的Add Tab按钮。

<?php include("db_conn.php"); $id = $_POST['id']; $level = $_POST['level']; $queryUpdate="UPDATE users SET Access='$level' WHERE ID='$id'"; $update = $mysqli->query($queryUpdate); ?>

https://plnkr.co/edit/XrYSKLdyN1cegfcdjmkz?p=preview

我怎样才能做到这一点？我已经有一段时间了，但仍然不知道如何解决这个问题。

谢谢，

Answer 1

猜猜你可能喜欢这个 fixed plunker ，

有点棘手的创建自己的directive ，而不是使用额外的<uib-tab>来实现目标。

示例代码：

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
  <script type="text/javascript">
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window, $timeout) {

      $scope.tabs = [{
        title: 'Tab1',
        content: 'content1'
      }, {
        title: 'Tab2',
        content: 'content2'
      }];
      $scope.activeTabIndex = 0;//$scope.tabs.length - 1;

      $scope.addTab = function() {
        var newTab = {
          title: 'Tab ' + ($scope.tabs.length + 1),
          content: 'content ' + ($scope.tabs.length + 1)
        };
        $scope.tabs.push(newTab);
        $timeout(function() {
          $scope.activeTabIndex = ($scope.tabs.length - 1);
        });
        console.log($scope.activeTabIndex);
      };
    });
    angular.module('ui.bootstrap.demo').directive('uibTabButton', function() {
      return {
        restrict: 'EA',
        scope: {
          handler: '&',
          text:'@'
        },
        template: '<li class="uib-tab nav-item">' +
          '<a href="javascript:;" ng-click="handler()" class="nav-link" ng-bind="text"></a>' +
          '</li>',
        replace: true
      }
    });
  </script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="TabsDemoCtrl">

    Active index: {{ activeTabIndex }}
    <br /> Tab count: {{ tabs.length }}
    <br />

    <input type="button" value="Add Tab" ng-click="addTab()" />

    <uib-tabset active="activeTabIndex">
      <uib-tab active="activeTabIndex==$index" ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
      <uib-tab-button handler="addTab()" text="Add a tab"></uib-tab-button>
    </uib-tabset>
  </div>
</body>

</html>

在uib-tab中添加带有活动和ng-repeat的选项卡

1 个答案: