gpt4 book ai didi

javascript - 使用 AngularJS/MVC5 在列表页面上实现搜索

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:43:53 25 4
gpt4 key购买 nike

我正在尝试在列表页面上实现搜索。

以下代码在将数据显示为列表时有效,但我不确定如何开始为此页面实现搜索功能。

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com