我是Angular JS的新手，我正在创建一个HTML页面，它有超过12个搜索选项供用户使用。有超过10个搜索选项的角JS页面
现在我应该创建12个独立的函数来调用REST API来获取搜索数据，有没有更好的方法来处理这个问题。
我也想知道是否没有找到搜索结果我应该让用户在同一页面上还是带他们到下一页并且不显示任何项目？
我该如何实现这一点我正在使用角ui-router去页面之间。
我也想知道如何当用户点击某个按钮时显示类似搜索进程（加载图像）的内容。
在此先感谢您的意见。
你可以有一个函数，并传递该函数中所有搜索框的值。它会增加你的页面的性能。如果没有找到结果，那么你可以隐藏数据div（你将显示数据）并显示没有找到数据的div。
你可以试试这样
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<form role="search">
<div class="col-md-12">
<div class="form-group col-md-3">
<input type="text" id="name" ng-model="searchQuery.name" placeholder="Name" class="form-control"/>
</div>
<div class="form-group col-md-3">
<input type="text" id="mobile-number" ng-model="searchQuery.mobileNumber" placeholder="Mobile Number" class="form-control"/>
</div>
<div class="form-group col-md-3">
<input type="email" id="email" ng-model="searchQuery.emailId" placeholder="Email Id" class="form-control"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group col-md-3">
<input type="text" ng-model="searchQuery.filter4" placeholder="filter4" class="form-control"/>
</div>
<div class="form-group col-md-3">
<input type="text" ng-model="searchQuery.filter5" placeholder="filter5" class="form-control"/>
</div>
<div class="form-group col-md-3">
<input type="text" ng-model="searchQuery.filter6" placeholder="filter6" class="form-control"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group col-md-3">
<input type="text" ng-model="searchQuery.filter7" placeholder="filter7" class="form-control"/>
</div>
<div class="form-group col-md-3">
<input type="text" ng-model="searchQuery.filter8" placeholder="filter8" class="form-control"/>
</div>
<div class="form-group col-md-3">
<input type="text" ng-model="searchQuery.filter9" placeholder="filter9" class="form-control"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group col-md-3">
<input type="text" ng-model="searchQuery.filter10" placeholder="filter10" class="form-control"/>
</div>
<div class="form-group col-md-3">
<input type="number" ng-model="searchQuery.filter11" placeholder="filter11" class="form-control"/>
</div>
<div class="form-group col-md-3">
<input type="text" ng-model="searchQuery.filter12" placeholder="filter12" class="form-control"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group col-md-1">
<button class="btn btn-info" id="search" type="button" ng-click="search(searchQuery, 0)">
Search
</button>
</div>
<div class="form-group col-md-1">
<button class="btn btn-info" id="clear" type="button" ng-click="clearSearch()">
Clear
</button>
</div>
</div>
</form>
</div>
<loading></loading>
<div class="table-responsive">
<table class="table table-bordered table-striped table-condensed table-hover" ng-show="!loading">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Mobile Number</th>
<th>Email Id</th>
<th>Address</th>
<th><a ng-click="sortBy('user.createdDate')">Added Date</a></th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-data" colspan="8" ng-show="itemList.length === 0">No Record found</td>
</tr>
<tr ng-repeat="user in itemList track by user.id">
<td>{{$index + index}}</td>
<td>{{user.fullName}}</td>
<td>{{user.mobileNumber}}</td>
<td>{{user.emailId}}</td>
<td>{{user.address}}</td>
<td>{{user.createdDate |date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
<pagination ng-show="!loading && totalItems > itemsPerPage" boundary-links="true" ng-change="pageChanged(currentPage)" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" max-size="10" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
</div>
</div>
SearchCtrl控制器
app.controller('SearchCtrl', function ($scope, $state, orderByFilter, SearchFactory) {
/**
* Initialization
*/
$scope.index = 1;
$scope.pageTitle = 'Listing';
$scope.searchQuery = {};
$scope.searchQuery.pageSize = 50;
$scope.searchQuery.pageNo = 0;
$scope.itemList = [];
$scope.itemsPerPage = 50;
/**
* Search
* @param SearchQuery : Search object contains various values for search.
* @param PageNo : Requesting data for particular page number .
*/
$scope.search = function(searchQuery, pageNo) {
searchQuery.pageNo = pageNo;
$scope.loading = true;
SearchFactory.get({'searchQuery':angular.toJson(searchQuery)}, function(response) {
$scope.loading = false;
$scope.itemList = response.items;
$scope.itemsPerPage = response.pageSize;
$scope.totalItems = response.count;
$scope.searchQuery = searchQuery;
}, function(e) {
$scope.loading = false;
console.error(e);
});
};
/**
* Load default item list
*/
$scope.search($scope.searchQuery, 0);
/**
* Fetch data for selected page.
*/
$scope.pageChanged = function (currentPage) {
$scope.index = 1 + ($scope.searchQuery.pageSize * (currentPage - 1));
$scope.searchQuery.pageNo = currentPage -1;
$scope.search($scope.searchQuery, currentPage -1);
};
/**
* Clear search parameters.
*/
$scope.clearSearch = function() {
$scope.index = 1;
$scope.searchQuery = {};
$scope.searchQuery.pageSize = 50;
$scope.searchQuery.pageNo = 0;
$scope.currentPage = 1;
$scope.search($scope.searchQuery,0);
};
/**
* sort column
* @param propertyName : Column name
*/
$scope.sortBy = function(propertyName) {
$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
$scope.propertyName = propertyName;
$scope.itemList = orderByFilter($scope.itemList, $scope.propertyName, $scope.reverse);
};
});
加载指令
app.directive('loading', function() {
return {
restrict: 'E',
replace:true,
template: '<div class="loading"><span> <img src="assets/images/spinner.gif" width="60" /></span></div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
};
});
UI路由器状态
state('app.user-search', {
url: '/search',
templateUrl: 'user/user-search.html',
controller: 'SearchCtrl',
})
你能分享html视图吗？ – nivas