Angular-使用相同搜索功能的两个搜索输入
Posted
技术标签:
【中文标题】Angular-使用相同搜索功能的两个搜索输入【英文标题】：Angular- two search inputs using same search function 【发布时间】：2014-12-02 19:51:44 【问题描述】：我正在尝试在 Angular 中使用一个搜索功能为一个表实现两个搜索输入
第一个输入在“名称”列中搜索，但在“描述”列中搜索第二个。 问题是，当我在其中一个中写一些东西时，会自动添加到第二个中。我正在向搜索函数发送一个参数，以便我可以选择它必须在哪一列中查找匹配项。
这是JSFiddle 这是我的 html：
<html xmlns:ng="http://angularjs.org" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
</head>
<body>
<script type="text/javascript">
var sortingOrder = 'name';
</script>
</div>
<div ng-controller="ctrlRead">
<div class="input-append">
<span>Name</span>
<input type="text" ng-model="query" ng-change="search('name')" class="input-large search-query" placeholder="Name">
<span class="add-on"><i class="icon-search"></i></span>
</div>
<div class="input-append">
<span>Description</span>
<input type="text" ng-model="query" ng-change="search('description')" class="input-large search-query" placeholder="Description">
<span class="add-on"><i class="icon-search"></i></span>
</div>
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
<th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="description">Description <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
<th class="field3">Field 3 <a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
<th class="field4">Field 4 <a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
<th class="field5">Field 5 <a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="disabled: currentPage == 0">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length)"
ng-class="active: n == currentPage"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="disabled: currentPage == pagedItems.length - 1">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>item.id</td>
<td>item.name</td>
<td>item.description</td>
<td>item.field3</td>
<td>item.field4</td>
<td>item.field5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
还有我的 JS：
function ctrlRead($scope, $filter)
// init
$scope.sortingOrder = sortingOrder;
$scope.reverse = false;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 5;
$scope.pagedItems = [];
$scope.currentPage = 0;
$scope.items = [
"id":"1","name":"John","description":"man","field3":"field3 1","field4":"field4 1","field5 ":"field5 1",
"id":"2","name":"Artur","description":"man","field3":"field3 2","field4":"field4 2","field5 ":"field5 2",
"id":"3","name":"David","description":"free","field3":"field3 3","field4":"field4 3","field5 ":"field5 3",
"id":"4","name":"Simon","description":"free","field3":"field3 4","field4":"field4 4","field5 ":"field5 4",
"id":"5","name":"John","description":"free","field3":"field3 5","field4":"field4 5","field5 ":"field5 5",
"id":"6","name":"Artur","description":"free","field3":"field3 6","field4":"field4 6","field5 ":"field5 6",
"id":"7","name":"David","description":"man","field3":"field3 7","field4":"field4 7","field5 ":"field5 7",
"id":"8","name":"John","description":"man","field3":"field3 8","field4":"field4 8","field5 ":"field5 8",
"id":"9","name":"Simon","description":"free","field3":"field3 9","field4":"field4 9","field5 ":"field5 9",
"id":"10","name":"John","description":"man","field3":"field3 10","field4":"field4 10","field5 ":"field5 10",
"id":"11","name":"Artur","description":"free","field3":"field3 11","field4":"field4 11","field5 ":"field5 11",
"id":"12","name":"name 12","description":"description 1","field3":"field3 12","field4":"field4 12","field5 ":"field5 12",
"id":"13","name":"name 13","description":"description 1","field3":"field3 13","field4":"field4 13","field5 ":"field5 13",
"id":"14","name":"name 14","description":"description 1","field3":"field3 14","field4":"field4 14","field5 ":"field5 14",
"id":"15","name":"name 15","description":"description 1","field3":"field3 15","field4":"field4 15","field5 ":"field5 15",
"id":"16","name":"name 16","description":"description 1","field3":"field3 16","field4":"field4 16","field5 ":"field5 16",
"id":"17","name":"name 17","description":"description 1","field3":"field3 17","field4":"field4 17","field5 ":"field5 17",
"id":"18","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18",
"id":"19","name":"name 19","description":"description 1","field3":"field3 19","field4":"field4 19","field5 ":"field5 19",
"id":"20","name":"name 20","description":"description 1","field3":"field3 20","field4":"field4 20","field5 ":"field5 20"
];
var searchMatch = function (haystack, needle)
if (!needle)
return true;
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
;
// init the filtered items
$scope.search = function (param)
$scope.filteredItems = $filter('filter')($scope.items, function (item)
for(var attr in item)
if(param === undefined)
if (searchMatch(item[attr], $scope.query))
return true;
else
if (searchMatch(item[param], $scope.query))
return true;
return false;
);
// take care of the sorting order
if ($scope.sortingOrder !== '')
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
$scope.currentPage = 0;
// now group by pages
$scope.groupToPages();
;
// calculate page in place
$scope.groupToPages = function ()
$scope.pagedItems = [];
for (var i = 0; i < $scope.filteredItems.length; i++)
if (i % $scope.itemsPerPage === 0)
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
else
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
;
$scope.range = function (start, end)
var ret = [];
if (!end)
end = start;
start = 0;
for (var i = start; i < end; i++)
ret.push(i);
return ret;
;
$scope.prevPage = function ()
if ($scope.currentPage > 0)
$scope.currentPage--;
;
$scope.nextPage = function ()
if ($scope.currentPage < $scope.pagedItems.length - 1)
$scope.currentPage++;
;
$scope.setPage = function ()
$scope.currentPage = this.n;
;
// functions have been describe process the data for display
$scope.search();
// change sorting order
$scope.sort_by = function(newSortingOrder)
if ($scope.sortingOrder == newSortingOrder)
$scope.reverse = !$scope.reverse;
$scope.sortingOrder = newSortingOrder;
// icon setup
$('th i').each(function()
// icon reset
$(this).removeClass().addClass('icon-sort');
);
if ($scope.reverse)
$('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-up');
else
$('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-down');
;
;
ctrlRead.$inject = ['$scope', '$filter'];
有什么办法可以解决这个问题吗？
搜索和表格的来源来自这个Post
【问题讨论】：
【参考方案1】：这是因为您的两个输入具有相同的 ng-model 属性。
$scope.query =
name: "",
description: ""
$scope.search = function (model)
var word = $scope.query[model];
【讨论】：
是的，你是对的。我已经意识到了这个问题，但现在我正在尝试以某种方式更改 ng-model 而不会使搜索功能复杂化。 我刚刚编辑了我的答案，提供了我会做的事情。希望对您有所帮助。 很遗憾没有。我不知道如何使用它。我尝试了一些东西，但总是对模型“未定义”。 我做到了，但方式不同。这是Fiddle 你觉得这样可以吗？不幸的是，它不像我预期的那样工作。例如，当我写名字-“Artur”时，我看到了 3 条记录。接下来，当我写描述“免费”时，它向我显示了所有描述为“免费”的记录，但我只想要 name="Artur" 您需要同时过滤两个字段才能使其以这种方式工作。您目前正在过滤作为参数传递给search 的那个。以上是关于Angular-使用相同搜索功能的两个搜索输入的主要内容，如果未能解决你的问题，请参考以下文章
#私藏项目实操分享# 使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用