Tìm kiếm danh sách trong góc JS

Question

Tôi có một hộp tìm kiếm trong một trang tức là header.html tập tin và danh sách trên mà tôi muốn thực hiện chức năng tìm kiếm là ngày khác tức là trang content.html. Vậy làm thế nào tôi có thể sử dụng chức năng tìm kiếm góc cạnh trong trường hợp này. Dưới đây là mã 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'); 
      }; 
    }]); 

On gõ một cái gì đó trong hộp tìm kiếm của header.html như đã đề cập ở trên, nó sẽ tìm kiếm nội dung trong content.html trang.

Answer 1

Cảm ơn các bạn. Tôi nhận được câu trả lời như thế này ...

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> 

nội dung.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

Bạn có thể sử dụng ng-change trên đầu vào của header.html để cập nhật mảng allSurveys.

Chỉ cần thêm một ng-change và ng-model nhập

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

của bạn Trong điều khiển của bạn, bạn có thể thêm một chức năng searchInputChanged mà sẽ lọc dữ liệu dựa trên searchInput sử dụng .filter().

Answer 3

Bạn có thể thiết lập danh sách các khảo sát trong một biến thành một $ rootScope, và nhận được giá trị của nó từ controller khác, như thế này:

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

Sau đó, bạn có thể nhận được biến này và thiết lập vào bộ điều khiển phạm vi nơi đầu vào của bạn.

$scope.allSurveys = $rootScope.surveysList; 

đầu vào của bạn nên được như thế này:

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

Và truy vấn que trong mẫu danh sách của bạn nên được như thế này:

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

Tôi hy vọng nó làm việc cho bạn