搜索在角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: '' 
}; 

Answer 2

您可以在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()筛选基于searchInput数据。

Answer 3

您可以设置一个变量为$ 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"> 

而在你的列表模板阙查询应该是这样的：

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

我希望它为你工作