Search input forwarding another page

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

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

This answer shows both how to pass the params in the URL and how to pass them as params in the state:

Here is another post on the different ways to pass params (which has a plunker at the end):

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?

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 | filter:searchTerm">

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

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.

Here is the codepen I threw together:

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:

Thank you so much, you save me :blush:

1 Like