Remove item in array without update view

Question

I have dinamic tabs (Angular UI Bootstrap) in my view this way:

 <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 function filaCtrl.closeTab() remove a tab, i.e., a item in array filaCtrl.tabs. But when a item is removed the view is updated and 'close' all tabs, i.e., refresh page.

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

How can i remove item without refresh my page?

Ben · Accepted Answer · 2017-03-27 21:49:33Z

1

ng-repeat does a two-way-binding so that objects changed in the view update the controller and vice-versa.

If you want to one-time-bind the the tabs array, you could define your ng-repeat statement as:

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

Note that the :: syntax will one-time-bind your array.

answered Mar 27, 2017 at 21:49

Ben

2,7261 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AJ Funk · Accepted Answer · 2017-03-27 21:48:18Z

0

This is expected behavior in Angular (and the magic of data binding). You will need to make a copy of self.tabs and use that in your ng-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)">

However, note that your closeTab function uses the index of the tab in your array. So if the user closes multiple tabs, you will run into issues since your tabs and tabsCopy array will be different.

A better approach is to use some kind of variable like tab.open or tab.closed to track the state of a tab. Then you can do something like

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

answered Mar 27, 2017 at 21:48

AJ Funk

3,1971 gold badge18 silver badges18 bronze badges

1 Comment

lesimoes Over a year ago

Doesn't work. When valeu of tab.open changes refresh the page too.

Collectives™ on Stack Overflow

Remove item in array without update view

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related