搜索在角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" 

我希望它爲你工作