Question

我正在尝试将uib-tabset设置为数组的最后一个元素。但是，当我这样做时，uib-tabset变得疯狂了，它删除了自己的标签。我不想拥有用于活动uib-tabset的作用域字段，我想使用数组长度来标识哪个选项卡应处于活动状态。有可能吗？

module.exports = {
 foo1: function(param){
   return new Promise((resolve,reject) => {
      var result = //some code here
      resolve(result);
   });
 },
 foo2: function(param){
   return new Promise((resolve,reject) => {
      this.foo1('abc').then(function(res){
        let response = {
            'item':'ok',
            'result':res.some_field
        };
        console.log(response);  // its ok here. 
        responseArray.push(response); //its ok here too
    }).catch(err =>{
        console.log(err);
        reject(err);
    });
    console.log(responseArray); //nothing in array here
    resolve(responseArray);
   });
 }
};

会导致意外结果，例如删除自己的标签页。完整示例：https://plnkr.co/edit/JJ0k8LtRPXqXKrjEM0bn?p=preview 尝试点击第一个标签。

Answer 1

我不知道为什么，但是将制表符的长度保存在控制器中似乎对我有用。希望能帮助到你。检查plnkr。

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

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2' },
    { title:'Dynamic Title 3', content:'Dynamic content 3' },
  ];
  $scope.tabslenght = $scope.tabs.length;
  $scope.model = {
    name: 'Tabs'
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<style type="text/css">
  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<div ng-controller="TabsDemoCtrl">


  <uib-tabset active="tabslenght">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" 
      disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
  </uib-tabset>
</div>
  </body>
</html>

Answer 2

如果您不想在控制器中为制表符长度声明另一个作用域变量（也可以使用），此技巧将为您服务：

<uib-tabset  ng-init="len = tabs.length" active="len">

Answer 3

由于我们最初需要激活最后一个标签，因此可以使用 ng-init 。请仔细阅读代码，希望它对您有用。

<uib-tabset ng-init="active=tabs.length" active="active">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" 
      disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
  </uib-tabset>

如何将活动选项卡绑定到作用域中数组的最后一个元素

3 个答案: