在不更新视图的情况下删除数组中的项目

Question

在我看来，我有动态标签（Angular UI Bootstrap）：

 <uib-tabset active="1" id="tabs" class="col-md-10">
            <uib-tab ng-repeat="tab in filaCtrl.tabs" ng-click="filaCtrl.getChatTab(tab.protocolo)">
                <uib-tab-heading >
                    <div style='display: flex; align-items: center; justify-content: center;'>
                        <h5 style='margin-right: 10px;'>Protocolo: {{tab.protocolo}}</h5>
                        <h7 ng-md-icon icon='cancel' style='fill:#F44336' size='16' ng-click='filaCtrl.closeTab(tab.protocolo, $index)'><h7>
                    <div>
                </uib-tab-heading>
            <div class="tab-content">
(...)

我的函数 filaCtrl.closeTab() 删除了一个选项卡，即数组 filaCtrl.tabs 中的一个项目。但是当一个项目被删除时，视图会更新并且 'close' 所有选项卡，即刷新页面。

self.closeTab = function (protocolo, $index) {
          self.tabs.splice($index, 1);
        };

如何在不刷新页面的情况下删除项目？

Answer 1

这是 Angular 中的预期行为（以及数据绑定的魔力）。您需要复制 self.tabs 并将其用于您的 ng-repeat

self.tabsCopy = angular.copy(self.tabs);

那你可以做

<uib-tab ng-repeat="tab in filaCtrl.tabsCopy" ng-click="filaCtrl.getChatTab(tab.protocolo)">

但是请注意，您的 closeTab 函数使用数组中选项卡的索引。因此，如果用户关闭多个选项卡，您将运行出现问题，因为您的 tabs 和 tabsCopy 数组将不同。

更好的方法是使用某种变量，如 tab.open 或 tab.closed 来跟踪选项卡的状态。然后你可以做一些像

<uib-tab ng-repeat="tab in filaCtrl.tabs" ng-click="filaCtrl.getChatTab(tab.protocolo)">
  <uib-tab-heading ng-if="tab.open>
    ...

Answer 2

ng-repeat 进行双向绑定，以便视图中更改的对象更新控制器，反之亦然。

如果您想一次性绑定 tabs 数组，您可以将 ng-repeat 语句定义为：

<uib-tab ng-repeat="tab in ::filaCtrl.tabs" ng-click="filaCtrl.getChatTab(tab.protocolo)">

请注意，:: 语法将一次性绑定您的数组。

在不更新视图的情况下删除数组中的项目

Remove item in array without update view

angularjs

angular-ui-bootstrap