On Clicking Search Button, i need to display result page in angular js

Question

I have a text box with a search Button as below

On clicking the search button, I am calling SearchController.search method and my expectation is it will display a new page with the result.

$scope.search = function () {
     $http.get('data/results.json').success(function (data) {
        $scope.activities = data;
        $state.go('results',data);
});

and my app.js looks as below

var myApp = angular.module('MyApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
     .state('results', {
         url: '/results',
         templateUrl: 'result.html',
         controller: 'SearchController'
      });
  $urlRouterProvider.otherwise('/');
});

But when I click on search button, nothing happens and url only changes to l/#/results .

I am not having any ui-view in search page and I want to go results page to display the result. How to get this fixed? what is the mistake I am doing?

Hmmm, it has to do with the format of the data you're passing to the $stateParams of the result page. I'm not sure if you can pass an object to the params like that. Can you give a hint/more info about the "data"? However, that's not how to pass query to routes in angularJs — Olatunde Garuba, Feb 16 '15 at 16:11
data is json formatted data. it is basically search result . so if i am searching for names of people, then data would look like [{name:vinaya},{name:general}] — Vinaya Kumar Thimmappa, Feb 16 '15 at 16:50
If the object was to be returning just a single value, I would have suggested you pass it in as a query params with "?name" like `$state.go("result", {name: data.name});` and your state url like `url:'/results?name'` and everything will be fine. but it's different. — Olatunde Garuba, Feb 16 '15 at 22:35

score 1 · Answer 1 · edited May 23 '17 at 12:31

1

You can't send a not mapped object into $state.go.

Looking the API: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

Another similar problem: AngularJS: Pass an object into a state using ui-router

edited May 23 '17 at 12:31

Community

1
1

answered Feb 16 '15 at 16:16

Rodolfo Jorge Nemer Nogueira

4,915
2
41
30

what would be a ideal solution , if i want search results to be displayed on a different page ? – Vinaya Kumar Thimmappa Feb 16 '15 at 18:09

score 0 · Answer 2 · answered Feb 16 '15 at 22:27

0

If you want to display it on a different page, use the "ui-sref" on the html to navigate to the new page and call ng-init on the page e.g

<button type="button" ui-sref="results">

and on result.html, you can call the init on the parent node such as

<section ng-init="search()"> ..... .... </section> and your controller will look like this now

$scope.search = function () {
  $http.get('data/results.json').success(function (data) {
    $scope.activities = data;
});

answered Feb 16 '15 at 22:27

Olatunde Garuba

1,049
1
16
21

How can i pass the input search box value? – Sanyam Jain Mar 24 '15 at 09:08
I guess you want to display the data with respect to search input? if so, write a filter on the ng-repeat that display the data. But if you strictly want to display that alone, you can also use lodash to findWhere the data correspond and then display them. – Olatunde Garuba Mar 25 '15 at 01:24

score 0 · Answer 3 · answered Feb 28 '15 at 11:27

With ui-router, state changes happens and different view is displayed based on state. So , when ui-router is used , moving from one page to another page is a wrong perception . We move from one state to another state and hence parameter passing can be done using "services".

On Clicking Search Button, i need to display result page in angular js

3 Answers3