我正在尝试在列表页面上实现搜索。
以下代码在将数据显示为列表时有效，但我不确定如何开始为此页面实现搜索功能。
HTML:
<body ng-app="myApp">
<div ng-controller="empCtrl" class="container">
<div>
<input type="text" ng-model="search_filter" placeholder="Search" />
</div>
<div class="container" infinite-scroll="pagedata()">
<div>
<div>
Id
</div>
<div>
Name
</div>
<div>
Description
</div>
</div>
<div ng-repeat="emp in emps | filter: search_filter"> //<<<<
<div class="column fifth">
{{emp.Id}}
</div>
<div class="column fifth">
{{emp.Name}}
</div>
<div class="column fifth">
{{emp.Description}}
</div>
</div>
</div>
</div>
</body>
MVC Controller :
public ActionResult Employee()
{
var model = new EmployeeViewModel();
var employees = GetEmployees();
model.EmployeeList = employees;
return View("List", model);
}
Angular :
myApp.controller('empCtrl', function ($scope, $http, $window) {
$scope.employees = $window.EmployeeViewModel;
$scope.pagedata = function () {
$http.get($scope.getBaseUrl()).success(function (data) {
});
}
});
最佳答案
由于您对服务器端搜索感兴趣，因此您需要稍微改变一下您的方法。
您正在检索的数据会在检索页面时填充。我建议将它移动到单独的 Action 或 WebAPI Controller ，如下所示:
[HttpGet]
public ActionResult List(string text)
{
var employees = GetEmployeesByText(text);
return Json(employees, JsonRequestBehavior.AllowGet);
}
我假设您将实现具有必要功能的 GetEmployeesByText。
然后在 Angular Controller 中获取数据:
myApp.controller('empCtrl', function ($scope, $http) {
$scope.employees = null;
$scope.search_filter = null;
$scope.getEmployees = function(text){
$http.get('/Employee/List?text=' + $scope.search_filter)
.success(function(data){
$scope.employees = data;
});
};
$scope.getEmployees();
});
最后:
<body ng-app="myApp">
<div ng-controller="empCtrl" class="container">
<div>
<input type="text" ng-model="search_filter" placeholder="Search" ng-change="getEmployees()" />
</div>
<div class="container">
<div>
<div>
Id
</div>
<div>
Name
</div>
<div>
Description
</div>
</div>
<div ng-repeat="emp in employees">
<div class="column fifth">
{{emp.Id}}
</div>
<div class="column fifth">
{{emp.Name}}
</div>
<div class="column fifth">
{{emp.Description}}
</div>
</div>
</div>
</div>
</body>
关于javascript - 使用 AngularJS/MVC5 在列表页面上实现搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25729547/