删除数组中的项目而不更新视图答案

【问题标题】：Remove item in array without update view删除数组中的项目而不更新视图
【发布时间】：2017-08-20 18:44:55
【问题描述】：

我的视图中有动态标签（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 中的一个项目。但是当一个项目被删除时，视图会更新并“关闭”所有选项卡，即刷新页面。

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

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

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案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>
    ...

【讨论】：

不起作用。当 tab.open 的 valeu 更改时也会刷新页面。

【解决方案2】：

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

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

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

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

【讨论】：