javascript - 在 Angular.js 中刷新模型时如何让选定的选项卡保持不变

Question

我继承了一些现有的 Angular.js 代码，但我对此不太了解。我添加的一项功能是能够每五秒自动刷新 View 中的数据。我通过更改 init 函数以使用 $interval 函数调用自身来完成此操作:

model.init = function (token) {
    model.token = token;
    model.dataUrl = GlobScope.rootPath + "upload/checkdata/" + token;

    var loadData = function() {
        commonHelper.apiGet("api/bases/" + model.token, function(result) {
            model.bases = result.data.bases;
            model.files = result.data.files;
            model.messages = result.data.messages;
        });
    }

    // Reload data every 5 seconds
    $interval(function () {
        loadData();
    }.bind(this), 5000);

    loadData();
}

这非常有效，现在当服务器上的数据发生变化时，客户端上的数据将在五秒内更新。然而，有一个小问题。我的 View 有很多选项卡:

<tabset>
   <tab heading="Input">
      <br />
      Some hard coded tab
   </tab>
   <tab ng-repeat="baseData in dataProcessingModel.bases" heading="{{baseData.base}}">
      Other tabs here depending on the data in the model
   </tab>
</tabset>

不幸的是，当刷新数据(每五秒)时，第一个选项卡会再次被选择。

在数据持续刷新的同时，让当前选定的选项卡保持选中状态的最简单方法是什么？

我尝试过的一件事是将事件选项卡绑定(bind)到模型的某些部分，然后我也许可以在模型更改时再次设置它:

<tab ng-repeat="baseData in dataProcessingModel.bases" heading="{{baseData.base}}" active="dataProcessingModel.activeTab == baseData.base">

然后在loadData函数中:

var defaultTab = '输入';

var loadData = function() {
    commonHelper.apiGet("api/bases/" + model.token, function(result) {
        model.activeTab = defaultTab;
        model.bases = result.data.bases;
        model.files = result.data.files;
        model.messages = result.data.messages;
    });
}

接下来，每次选择新选项卡时，我都必须更改 defaultTab 。然而，使用此代码，选项卡将完全损坏。单击选项卡不会执行任何操作。

有没有简单的方法可以解决这个问题？我挖掘了tab docs并且找不到任何感兴趣的内容。

Answer 1

问题在于 ng-repeat 如何跟踪项目。在您的情况下，每个“可重复”项目 - baseData - 都是一个对象，并且每次重新加载项目时它都是不同的对象，因此， ng-repeat 没有知道哪个是哪个的方法。因此，当您重新加载时，ng-repeat 将创建全新的 tab 指令，因此 active 选项卡将丢失。

此时，track by 用于告诉 ng-repeat 如何跟踪对象。在您的情况下，通过 $index 进行跟踪似乎是最合适的(如果您有其他一些不可变属性来跟踪对象，您也可以使用它，例如 baseData.id)

<tabset>
  <tab ng-repeat="baseData in dataProcessingModel.bases track by $index"
       heading="{{baseData.base}}">
    {{baseData.content}}
  </tab>
</tabset>

<强> Demo