[英]Angular js search filter (date and ng-repeat inside ng-repeat)
我有一個顯示用戶信息的表。 我們在頂部有一個搜索框,允許用戶輸入文本並從下拉列表中選擇要搜索的類型。
<input type="text" ng-model=search>
<select ng-model=searchBy>
<option value="$">All</option>
<option value="Name">Name</option>
<option value="DoB">Date of birth</option>
<option value="Hobbies">Hobby</option>
</select>
<div ng-repeat="user in users | filter:searchFilter">
<div>{{user.Name}}</div>
<div>{{user.DoB | date: "MM/dd/yyyy"}}</div>
<div ng-repeat="hobby in user.Hobbies">{{hobby}}</div>
</div>
在javascript中:
Object.defineProperty($scope, "searchFilter", {
get: function () {
var out = {};
out[$scope.searchBy || "$"] = $scope.search;
return out;
}
});
這僅適用於Name列。 對於日期列,格式存在差異,而內部循環中的愛好不同,即使搜索文本處於愛好中,用戶也不會顯示在列表中。 有人可以幫助您使用滿足所有這些價值的過濾器嗎?
TIA。
可能有更好的解決方案,但這可能有效:
JavaScript的:
Object.defineProperty($scope, "searchFilter", {
get: function () {
var out = {};
var search = $scope.search;
if(!search) {
return {'$': ''};
}
if($scope.searchBy === 'DoB') {
search = new Date(search).getTime();
}
if($scope.searchBy === 'Hobbies') {
$scope.users.forEach(function(n) {
n.hobbyStr = n.Hobbies.join(',');
});
$scope.searchBy = 'hobbyStr';
}
out[$scope.searchBy || "$"] = search;
return out;
}
});
這是一個plnkr
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.