javascript - 在 Angular JS 中搜索列表

Question

我在一个页面上有一个搜索框，即 header.html 文件，而我要实现搜索功能的列表在另一页上，即 content.html .那么在这种情况下我如何使用 angularjs 搜索功能。以下是 html 代码。

header.html

<div class="input-group col-md-12 search-inner-page ">
   <input type="text" class="form-control" placeholder="Search" name="q">
</div>

content.html

<div class="surveyList" ng-repeat="survey in allSurveys">
    <span class="checkbox" ></span>
    <div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
        <div class="col-xs-5 col-sm-2  col-md-2">{{survey.Name}}</div>
        <div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
        <div class="col-sm-3  col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
        <div class="col-sm-3  col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
        <div class="col-sm-2  col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
        <div class="hidden-xs surveyListTool"  ng-show="hoverEdit">
        <a class="editSurvey" title="edit"></a>
        <a class="deleteSurvey" title="delete"></a>
        <a class="exportSurvey" title="export survey"></a>
        <a class="menuSurvey" title="menu"></a>
    </div>
</div>

contentCtrl.js

angular.module("adminsuite").controller("surveyController",['getAllSurveyService','AuthenticationService', '$scope','$rootScope', '$state', function(getAllSurveyService,AuthenticationService, $scope,$rootScope,$state){

getAllSurveyService.surveyList().then(
function( data ) {
    $scope.allSurveys = data;
    console.log($scope.allSurveys);
    if($scope.allSurveys.ErrorMessage){
      AuthenticationService.ClearCredentials();
      $state.go('login');
    }
}
 );

 }]);

headerController.js

angular.module("adminsuite").controller("headerController",['AuthenticationService','$rootScope','$cookieStore','$scope',function(AuthenticationService,$cookieStore,$scope,$rootScope){
   $scope.header = "Header";
  $scope.searchInSurvey = $scope.surveySearch;
     $scope.logout = function(){
                //$scope.dataLoading = true;
                AuthenticationService.ClearCredentials();
                console.log($cookieStore.get('globals'));
                //$state.go('login');
            };
  }]);

在上面提到的 header.html 的搜索框中输入内容时，它应该搜索 content.html 页面中的内容。

Answer 1

您可以在 header.html 的输入上使用 ng-change 来更新 allSurveys 数组。

只需在您的输入中添加一个ng-change 和一个ng-model

<div class="input-group col-md-12 search-inner-page ">
  <input ng-model="yourCtrl.searchInput" ng-change="yourCtrl.searchInputChanged" type="text" class="form-control" placeholder="Search" name="q">
</div>

在您的 Controller 中，您可以添加一个函数 searchInputChanged，它将使用 .filter() 根据 searchInput 过滤数据。