Question

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

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

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) {
        });
    }
});

Answer 1

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

当您检索页面时，将立即填充您正在检索的数据。我建议将它移动到一个单独的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>

使用AngularJS / MVC5在List页面上实现搜索

1 个答案: