Delete an item in an array without updating

Question

I have dynamic tabs (Angular UI Bootstrap), in my opinion:

 <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">
(...)

My filaCtrl.closeTab () function removes the tab, i.e. element in the filaCtrl.tabs array. But when the item is deleted, the view is updated and "closes" all tabs, that is, it refreshes the page.

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

How can I delete an item without refreshing my page?

Answer 1

This is the expected behavior in Angular (and the magic of data binding). You will need to make a copy self.tabsand use it inng-repeat

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

Then you can do

<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)">

, :: .