使用自定義篩選器篩選2個屬性angularjs

我想通過Angular中的多個屬性進行篩選。我可以通過使用角度filter:{ title: searchString }輕鬆地過濾一個屬性，但通過多個屬性過濾...我創建了我自己的自定義過濾器，它嘗試通過數組中的任何屬性匹配搜索字符串。使用自定義篩選器篩選2個屬性angularjs

我需要做的是：

如果John Wayne通過傳遞..它顯示John Wayne但如果只John或僅Wayne通過......通過它仍顯示約翰·韋恩。同樣，對於因爲Johnn w與n和subTitle開始於w

PS結束：我只可以有一個NG-模式

HTML：

<input type="text" ng-model="searchString"> 

<div ng-repeat="tel in arr1 | customFilter: searchString:['title','subTitle']"></div>

JS：

$scope.arr1 = [ 
    {title: 'John', subTitle:'Wayne'} 
    {title: 'Barry'} 
]; 

.filter('customFilter',[ function() { 
    return function(items, searchText, attrs) { 
     var filtered = []; 
     var filteredItems = items.map(function(item) { 
      angular.forEach(attrs, function(attr) { 
       if (item.hasOwnProperty(attr)) { 
        filtered.push(item); 
       } 
      }); 
     }); 
     return filtered; 
    }; 
}])

我的問題是我得到一個錯誤或說：

不允許在中繼器中複製。使用'track by'表達式來指定指定的唯一鍵。直放站：tel in arr1

來源

2017-01-05 user4756836

您的過濾器的名稱的錯誤：在你的過濾器名和custommFilter customFilter在HTML –

@ManuelObregozo哎呦..這是一個錯字。意外插入在帖子中，但那不是問題 – user4756836

我仍然得到它的過濾器的想法，什麼是你的數組的輸出？ –

我只是做了一些更新您的自定義過濾器：

app.filter('customFilter',[ function() { 
    return function(items, searchText, attrs) { 
     var filtered = []; 
     for (var i in items){ 
      var keepGoing = true; 
      angular.forEach(attrs, function(attr) { 
      console.log(items[i][attr]) 
       if (items[i].hasOwnProperty(attr) && items[i][attr].includes(searchText) && keepGoing) { 
        filtered.push(items[i]); 
        keepGoing=false; 
       } 
      }); 
     } 

     return filtered; 
    }; 
}])

考慮到，在這種情況下，它是區分大小寫的。

雖然它按預期工作，但我覺得它可以改進。

Plunker樣品： https://plnkr.co/edit/YnkSSOpG8sBQvVChIIuP?p=preview

來源

2017-01-05 17:28:02

我之前也試過：（...但在你的例子中，當我輸入「wayne」 – user4756836

這是什麼導致我創建一個自定義過濾器 – user4756836

匹配條件可能是一個子字符串也是？ –

您收到此錯誤的原因是arr1中的重複項。只需添加track by $index達到理想的解決方案

<div ng-repeat="tel in arr1 track by $index | custommFilter: searchString:['title','subTitle']"></div>

來源

2017-01-05 17:03:35

錯誤消失了，當我在最後插入曲目...但現在它不會做我想做的事......它沒有正確過濾 – user4756836

一次過濾標題或子標題。你怎麼能一次完成這兩件事？ –

使用自定義篩選器篩選2個屬性angularjs

回答

相關問題