在角度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

<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>

内容.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: ''
};