Geek Answers Handbook

List search in angular JS

I have one search box on one page, i.e. header.html , and the list on which I want to implement the search function is on another page, i.e. content.html , So, how can I use the angularjs search function 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'); }; }]);

When entering text in the header.html search field , as indicated above, it should search for content on the content.html page.

+5
source share
3 answers

Thanks guys. I got an 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: '' };
0
source

Perhaps you can use ng-change in the header.html input to update the allSurveys array.

Just add ng-change and ng-model to your input

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

In your controller, you can add a searchInputChanged function that will filter data based on searchInput with .filter() .

0
source

You can set your Surveys list in a variable in $ rootScope and get its value from another controller, for example:

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

After that, you can get this variable and set it to the controller area where your input is located.

 $scope.allSurveys = $rootScope.surveysList;

Your entry should look like this:

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

And the qu query in your list template should look like this:

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

I hope this works for you.

0
source

More articles:


All Articles