更新ビューなしで配列内のアイテムを削除

Question

私は、私の見解では動のタブ（角UIブートストラップ）は、この方法を持っている：

<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（）削除タブ、配列filaCtrl内の項目.tabs。しかし、アイテムが削除されると、ビューは更新され、すべてのタブ、つまり、ページを更新します。

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

ページを更新せずにアイテムを削除するにはどうすればよいですか？

Answer 1

これは、Angular（およびデータバインディングの魔法）で期待される動作です。あなたのcloseTab機能がお使いのアレイにタブのインデックスを使用することに注意してください、そして、あなたはしかし

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

を行うことができますself.tabsのコピーを作成する必要があり、あなたのng-repeat

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

にそれを使用します。したがって、ユーザーが複数のタブを閉じると、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)"> 

注意。