AngularJS上帶有複選框的布爾過濾器

我有一個對象數組，其屬性published可以是true或false。我正在構建一個篩選器，以便只能顯示已發佈或僅發佈的項目。AngularJS上帶有複選框的布爾過濾器

到目前爲止公佈的一個正常工作是這樣的：

<input 
    type="checkbox" 
    ng-model="search.published" 
    ng-change="search.published = search.published ? true : undefined"> 
Published

而在NG-重複它看起來像這樣：

ng-repeat="exhibitor in filterItems = (data | filter: search)"

問題是當我嘗試另一個複選框添加到僅顯示未發佈的項目。

我已經試過這與第二個複選框：

<input 
    type="checkbox" 
    ng-model="search.published" 
    ng-change="search.published = search.published ? false : undefined"> 
Unpublished

但當然也不能有相同的模型作爲出版項目之一。此外，即使我刪除第一個複選框，該複選框也不會被勾選。

有關如何解決此問題的任何提示？

來源

2017-07-24 Eric Mitjans

我明白的問題是關於使用複選框，但也許這可以轉換成UX問題...它是有意義的使用這樣複選框？你可以嘗試使用單選按鈕或選擇，這將節省解決方法的麻煩，並會更直觀 –

@PatrickBarr選擇確實是正確的方式（： –

複選框會自動爲其ng-model值分配true或false值，因此不需要按照您的方式使用ng-change。

<input 
    type="checkbox" 
    ng-model="search.published"> 
Published

當選中時，search.published將爲true。如果未選中，它將是錯誤的。同樣適用於第二個複選框，但您應該使用不同的ng-model屬性。

<input 
    type="checkbox" 
    ng-model="search.unpublished"> 
Unpublished

接下來，你需要在你的控制器創建一個自定義過濾器：

$scope.myCustomFilter = function(exhibitor) { 
    if (exhibitor.published && exhibitor.published === $scope.search.published) { 
     return exhibitor; 
    } else if (!exhibitor.published && exhibitor.published === $scope.search.unpublished) { 
     return exhibitor; 
    } 
};

你需要你確保你在你的控制器定義$scope.search。

$scope.search = { 
    published: false, 
    unpublished: false 
};

現在爲您ng-repeat：

ng-repeat="exhibitor in filterItems | filter:myCustomFilter"

來源

2017-07-24 19:31:00

AngularJS上帶有複選框的布爾過濾器

回答

相關問題