KISHAN PATI KISHAN PATI - 3 months ago 9
AngularJS Question

Searching the list in angular JS

I have one search box in one page i.e header.html file and the list on which i want to implement the search functionality is on another page i.e content.html. So how can i use angularjs search functionality in this case. Below is the html code.

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 typing something in the search box of header.html as mentioned above, it should search the content in content.html page.

Answer

Thank You guys. I got the answer like this...

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