如何在一个搜索框中使用多个角度参数进行搜索
how to search using multiple parameters in angular in a single search box?
我有一个搜索字段，我想对它应用一个过滤器，我想用多个参数搜索我的json数据，我想以这样的方式指定参数，以便我可以在调用api时更改它们，在这个代码中，按名称和分支类别，但我只能按名称搜索，我不知道如何修复它，请帮助
这是我的代码
index.html
<!DOCTYPE HTML>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dynamic Pagination w/ Filtering</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Kim Maida">
<!-- JS Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" type="text/javascript"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<!-- Angular Scripts -->
<script src="script.js" type="text/javascript"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="PageCtrl">
<label>Search:</label> <input type="text" ng-model="search.name" placeholder="Search" />
<br />
<h1>Items</h1>
<ul>
<li ng-repeat="item in filtered = items | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{item.name}} {{item.branch}}</li>
</ul>
<!-- <pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit"></pagination> -->
<ul class="pagination">
<li ng-class="DisablePrevPage()">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
<a href="#">{{n+1}}</a>
</li>
<li ng-class="DisableNextPage()">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</body>
</html>
这是我的应用程序.js代码
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
return function (input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
"name": "name 1",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 2",
"category": [{
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 3",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 4",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 5",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 6",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 7",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 8",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 9",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 10",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "name 11",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 12",
"category": [{
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 13",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 14",
"category": [{
"category": "engineering"
}],
"branch": "East"
}, {
"name": "name 15",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "East"
}, {
"name": "name 16",
"category": [{
"category": "management"
}],
"branch": "West"
}, {
"name": "name 17",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "name 18",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 19",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 20",
"category": [{
"category": "engineering"
}],
"branch": "East"
}, {
"name": "Peter",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Frank",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "Joe",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Ralph",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "Gina",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Sam",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "East"
}, {
"name": "Britney",
"category": [{
"category": "business"
}],
"branch": "West"
}];
// create empty search model (object) to trigger $watch on update
$scope.search = {};
$scope.resetFilters = function () {
// needs to be a function or it won't trigger a $watch
$scope.search = {};
};
// pagination controls
// $scope.currentPage = 1;
// $scope.totalItems = $scope.items.length;
// $scope.entryLimit = 2; // items per page
// $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit)-1;
$scope.entryLimit = 2;
$scope.currentPage = 0;
$scope.totalLeadItems = $scope.items.length;
$scope.range = function() {
var rangeSize = 3;
var ps = [];
var start;
start = $scope.currentPage;
if ( start > $scope.pageCount()-rangeSize ) {
start = $scope.pageCount()-rangeSize+1;
}
for (var i=start; i<start+rangeSize; i++) {
ps.push(i);
}
return ps;
};
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.DisablePrevPage = function() {
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.pageCount = function() {
return Math.ceil($scope.totalItems / $scope.entryLimit)-1;
};
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
}
};
$scope.DisableNextPage = function() {
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
};
$scope.setPage = function(n) {
$scope.currentPage = 0;
};
// $watch search to update pagination
$scope.$watch('search', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.items, newVal);
$scope.totalItems = $scope.filtered.length;
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.currentPage = 1;
}, true);
}]);
您刚刚错过了模型。对象：
使用过滤器：搜索。名称:
<li ng-repeat="item in filtered = items | filter:search.name | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{item.name}} {{item.branch}}</li>
相关文章：
- 谷歌CSE-搜索参数
- 如何让typeahead在我的搜索栏中填充自定义参数
- jQuery脚本，它搜索现有的查询参数并且不添加“"如果存在
- 为什么字符串搜索的参数表现得像Regex
- 如何在 angularjs 中存储和检索搜索参数
- jQuery getScript 函数添加了搜索参数，并抛出 404 错误
- location.href + 指定搜索参数
- AngularJS-自动向URL添加哈希标签-覆盖搜索参数
- 天气API，如何组合搜索参数以获得更详细的位置(城市、州、国家等），以防止位置混淆
- 将状态添加到特定搜索参数的历史记录中
- 在集合中搜索具有类似属性和搜索参数的模型
- 在Sequelize.js中使用动态搜索参数
- 传递一个位置.搜索参数到Jasmine (Karma)测试
- 如何在AngularJS中去掉URL中的搜索参数
- 设置搜索参数的javascript谷歌驱动api
- 可选的搜索参数与猫鼬
- 通过美元的位置.使用ng-href搜索参数
- 如果手风琴选项卡的子选项卡与搜索参数匹配，如何使其处于活动状态
- $routeProvider不传递搜索参数路由
- 如何防止在$location哈希搜索参数更改上创建新的控制器实例
