在陣列沒有更新視圖刪除項目

我有我的觀點DINAMIC片（角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"> 
(...)

我的功能filaCtrl.closeTab（）刪除一個標籤，即在陣列filaCtrl一個項目.tabs。但是當一個項目被移除時，視圖被更新並且'關閉'所有標籤，即刷新頁面。

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

如何刪除項目而不刷新我的頁面？

來源

2017-03-27 lesimoes

這是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> 
    ...

來源

2017-03-27 21:48:18

不起作用。 tab.open的valeu變更時也刷新頁面。 – lesimoes

ng-repeat做雙向綁定，這樣在視圖中更改對象更新控制器，反之亦然。

如果你想給的tabs陣列一次性綁定，你可以定義你的ng-repeat語句：

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

注意，::語法將一次性綁定您的陣列。

來源

2017-03-27 21:49:33

不起作用。我的標籤是動態的！ – lesimoes

在陣列沒有更新視圖刪除項目

回答

相關問題