使用AngularJS/MVC5实现列表页搜索

Implementing search on List page using with AngularJS/MVC5

本文关键字：列表 搜索 实现 MVC5 AngularJS 使用      更新时间：2023-09-26

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

以下代码适用于将数据显示为列表，但我不确定如何开始在该页面上实现搜索功能。

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控制器：

public ActionResult Employee()
{
    var model = new EmployeeViewModel();
    var employees = GetEmployees();
    model.EmployeeList = employees;
    return View("List", model);
}

角度：

myApp.controller('empCtrl', function ($scope, $http, $window) {
    $scope.employees = $window.EmployeeViewModel;
    $scope.pagedata = function () {
        $http.get($scope.getBaseUrl()).success(function (data) {
        });
    }
});

由于您对服务器端搜索感兴趣，因此需要稍微改变一下方法。

您现在正在检索的数据将在检索页面时填充。我建议将其移动到一个单独的Action或WebAPI控制器，如下所示：

[HttpGet]
public ActionResult List(string text)
{
    var employees = GetEmployeesByText(text);
    return Json(employees, JsonRequestBehavior.AllowGet);
}

我认为您将使用必要的功能来实现GetEmployeesByText。

然后在角度控制器中获取数据：

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>
相关文章：