在angular JS中搜索列表

Searching the list in angular JS

本文关键字：搜索 列表 JS angular      更新时间：2023-09-26

我有一个搜索框在一个页面即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页面中的内容。

您可以在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>

在你的控制器中，你可以添加一个函数searchInputChanged，它将使用.filter()基于searchchinput过滤数据。

您可以将变量中的调查列表设置为$rootScope，并从另一个控制器获取其值，如下所示:

//Controller that contains the list
$rootScope.surveysList = [s1,s2,s3,...,sn];

之后，您可以获得该变量并将其设置为输入所在的控制器范围。

$scope.allSurveys = $rootScope.surveysList;

你的输入应该像这样:

<input ng-model="surveySearch" type="text" class="form-control" placeholder="Search" name="q">

列表模板中的que query应该是这样的:

ng-repeat="survey in allSurveys | filter:surveySearch"

我希望它对你有用

谢谢大家。我得到的答案是这样的……

header.html 

<div class="input-group col-md-12 search-inner-page">
                      <input type="text" class="form-control" placeholder="Search" name="q" ng-model="global.search">
                      <img src = "images/search.png" alt = "Generic placeholder thumbnail" >
                  </div>

content.html 

<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search">
<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>

headerCtrl.js 

$rootScope.global = {
    search: ''
};
相关文章：