項目的角度ngRepeat

內編輯時消失我有一個項目數組，每個顯示爲NG-重複內的指令是這樣的：項目的角度ngRepeat

<div ng-repeat="item in ctrl.data | filter:ctrl.query" class="ubi-box container-fluid"> 
    <user-item item="item" . . .></user-item> 
</div>

正如你所看到的，上有NG的過濾器-重複。在指令中，用戶可以編輯表單內的項目，以顯示用戶何時單擊其中一個項目。

當用戶編輯影響過濾器的字段時會出現問題。如果用戶使用過濾器（ctrl.query）找到了該項目，並且編輯的文本表示該項目不再與過濾器匹配，那麼在用戶點擊保存或任何內容之前該項目突然消失。噗！

什麼是最優雅的解決方案？編輯開始時我不想關閉過濾器，因爲所有的項目都會重新出現。我希望過濾器仍能正常工作，但我希望正在編輯的項目即使會被過濾掉也會繼續顯示。

我是否在每個項目中設置了「isOpen」標誌，並向篩選器添加了「orOpen」子句？添加這樣的標誌總是讓我覺得很糟糕，我甚至不知道如何在過濾器語法中這樣做。

是否向過濾器添加「or isFormVisible」子句？這可能會更整潔，但是，我又如何在ngRepeat過濾器語法中做到這一點？

想法？

在此先感謝

約翰

來源

2015-11-13 John

可能有更優雅的解決方案在那裏，但我可能會遵循Angular文檔中的示例。

https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state

當編輯開始時，複製該項目正在編輯的新對象填充編輯控件（幕後視圖控件仍然是主對象）。一旦保存，您將更新後的對象複製到主對象中，此時將恢復到視圖模式，並且它將被過濾器隱藏。

東西沿着這些路線：

$scope.edit = function (item){ 
    $scope.editItem = angular.copy(item); 
    } 

    $scope.saveTo = function(item){ 
    for (var i = 0; i < $scope.items.length; i++){ 
     if ($scope.items[i].id === item.id){ 
     $scope.items[i] = angular.copy($scope.editItem); 
     break; 
     } 
    } 

    $scope.editItem = {}; 
    }

我比較項目的ID被編輯在列表中每個項目的ID，以確保只有一個可以在一個時間NG-if'd。這裏有一個示例plunk。

更新：這是另一個plunk使用不同的查詢過濾器和你做，當你進入編輯模式，一個ID設置的標誌。與之前的類似，但沒有一個主對象代碼。如果你已經有一個編輯模式，這似乎應該是非常快的申請。

來源

2015-11-13 04:51:20

這就是答案我很害怕，因爲重寫很多代碼的工作很多:(我希望只是調整過濾器，也許（現在我更多地閱讀）了一個函數，但我擔心你可能是對的，我有在我的應用程序的其他地方使用了這種模式，所以我知道它已經足夠了，謝謝 – John

@John我給了它另一個旋轉 –

我開始致力於實現你的第一個答案，並且它不是很難實現，以我的指令結構的方式進行，它不會比你的第二個答案更困難：只需要幾行代碼（我已經在使用複製模式複製函數的形式，所以它只是反轉它的問題爲表格保存，並通過c opy的形式指令。）所以哪一個是更堅實的方法，你認爲？那第一個模型拷貝來自文檔，所以也許我應該這樣做？太感謝了。 – John

我會建議使用ng-model-options與$render選項一起，這裏是一個工作示例：http://plnkr.co/edit/IFpXBYeJx1wrbKhhzMZg?p=preview

<form name="userForm"> 
    <label>Name: 
     <input type="text" name="name" ng-model="name" ng-model-options="{ updateOn: 'click' }" /> 
    </label> 
    <button ng-click="userForm.userName.$render();">Update Now</button> 
    <br /> 
    </form>

來源

2015-11-13 02:55:31

不會updateOn：「點擊」只是延遲更新，直到上的東西，用戶點擊？我不需要updateOn：'提交'？麻煩的是，我的表單有很多實時驗證，比如測試有效的電子郵件地址，如果我延遲模型更新，驗證不會在正確的時間運行。 – John

我還沒有親自嘗試過這個，但我相信你正在尋找form.username。$ error是有錯誤的，所以如果你的模態已經更新或者沒有更新，你可以試試 –

項目的角度ngRepeat

回答

相關問題