Search input forwarding another page

ionic-v1
1

Hi.
I wanted to create a simple search bar, where you will be forwarded to another page if you enter.
This is my code:

<form ng-submit="goToTab(searchTerm)">
  <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="text" placeholder="Search" ng-model="searchTerm">
  </label>
</form>

and in my controller :

$scope.goToTab = function(searchTerm) {
  $state.go('otherTabState', {searchTerm: searchTerm});
};

but i dont know how to show the result in search page. Could anyone help me to solve it?
Thank you

2

This answer shows both how to pass the params in the URL and how to pass them as params in the state: http://stackoverflow.com/a/25647714/3802466

Here is another post on the different ways to pass params (which has a plunker at the end): http://benfoster.io/blog/ui-router-optional-parameters

Once you are in the new state you can get the searchTerm from $stateParams, and then call your function to get your results.

Which part are you having problems with?

3

Thank you for your reply. I’m new in ionic and angular.
I dont know how to show the result.
I try

<div class="list" ng-repeat="news in vm.news | filter:searchTerm">
    {{news.title}}
</div>

But i dont know how search page get the value of searchTerm from the input.

4

If I’m understanding correctly, you are trying to pass searchTerm from one state to another via $stateParams. In order to get the value of searchTerm in the state where you show the results, you need to get it from $stateParams and assign it to your $scope. So in your controller it would be like this:

$scope.searchTerm = $stateParams.searchTerm;

Are you able to put together a codepen or plunker so I can further help with your use case? If not, I can throw something together for you tomorrow.

5

Here is the codepen I threw together: http://codepen.io/brandyshea/pen/ZGBmpa?editors=101

And also, if you don’t have much else on the page where they type the search, you could always put the search bar as a subheader on the same page: http://codepen.io/brandyshea/pen/gbZrNQ

6

Thank you so much, you save me :blush:

1 Like