無論過濾器如何，以ng-repeat顯示選中的行

列出的每個字符名稱都有一個複選框。 div的內容根據輸入到搜索框中的文字進行更新。無論過濾器如何，以ng-repeat顯示選中的行

如果我在div中檢查「Harry」，然後在搜索欄中輸入「Tom」，「Harry」從div中消失。如果我然後刪除搜索欄內的文本（「湯姆」），「哈利」重新出現在div中。然而，與其相鄰的複選框不再被檢查。

我想要的是，被檢查的名稱不應該消失，不管搜索文本是什麼。此外，檢查的條目應該出現在div中列表的最頂部。

在任何時候，div中最多應該有5個條目。

有人可以請告訴我如何實現這一目標嗎？

app.js

$scope.characters = [ 
    { id: 1, name: "Dexter" }, 
    { id: 2, name: "Harry" }, 
    { id: 3, name: "Ronald" }, 
    { id: 4, name: "Ginny" }, 
    { id: 5, name: "Tom" }, 
    { id: 6, name: "Hermione" }, 
    { id: 7, name: "Severus" }, 
    { id: 8, name: "Marvolo" }, 
    { id: 9, name: "Sirius" } 
];

page.html中

<input type='text' ng-model='searchText' placeholder='Search'> 

<div ng-repeat='char in characters | filter: searchText | limitTo: 5'> 
    <input type='checkbox' id='{{ char.id }}'> 
    <span>{{ char.name }}</span> 
</div>

來源

2015-11-05 gdebojyoti

爲了保持複選框的狀態，你需要使用ng-model指令上的複選框，輸入：

<input type='checkbox' ng-model="char.checked" id='{{ char.id }}'>

要在頂部選中元素，請將orderBy篩選器添加到ng-repeat。對於過濾，你可以寫自己的過濾器（我把它放在控制器內，但你當然可以將其添加爲適當過濾器，太）：

HTML

<div ng-repeat="char in characters | 
    filter: showCharacter | 
    orderBy: 'checked' | 
    limitTo: 5">

JS（在你的控制器）

$scope.showCharacter = function(character) { 
    if (character.checked) { 
    return true; // Keep element if it is checked 
    } 
    if (_.startsWith(character.name, $scope.searchText)) { 
    return true; // Keep element if it matches search text 
    } else { 
    return false; // Remove element otherwise 
    } 
};

注：我用lodash的_.startsWith功能爲簡單起見，你可以明顯地用其他任何方法來替代它來檢查你的搜索文本是否與該字符的名字匹配。

您可以在此JSBin中看到整個行動。

來源

2015-11-05 14:18:24 muenchdo

感謝您的回答。雖然orderBy''checked'部分似乎沒有正常工作，但如果我檢查一個條目，它會按預期上升到頂部，所以如果有多個檢查條目，它們都會上到頂部，然後點但是，如果我然後取消選中任何一個檢查的條目，它將升至頂端這就好像有三個類別 - 未經檢查，已檢查並且未經檢查（在順序越來越重要） – gdebojyoti

問題解決了，問題在於'character.checked'沒有默認值，所以行的順序變成了 - 'false'（新選中），'true'，''。，我將下列語句設置爲默認值爲false - 'if（！chara cter.checked）{character。checked = false; }' 然後在'ng-repeat'裏面，我修改orderBy爲'orderBy：'--checked''。那樣做了。 :-) – gdebojyoti

你說得對，對不起。看起來像Angular在排序時將未定義的值放在頂部。接得好！ – muenchdo

無論過濾器如何，以ng-repeat顯示選中的行

回答

相關問題