angularjs – 删除数组中没有更新视图的项目

发布时间：2020-12-17 17:00:24 所属栏目：安全来源：网络整理

导读：我在这个视图中有dinamic标签(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-it

我在这个视图中有dinamic标签(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);
        };

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

解决方法

这是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函数使用数组中选项卡的索引.因此,如果用户关闭多个选项卡,您将遇到问题,因为您的选项卡和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>
    ...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!