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
– Olatunde Garuba, Commented Feb 16, 2015 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
– Vinaya Kumar Thimmappa, Commented Feb 16, 2015 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
– Olatunde Garuba, Commented Feb 16, 2015 at 22:35

Community · Accepted Answer · 2017-05-23 12:31:35Z

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, 2017 at 12:31

CommunityBot

11 silver badge

answered Feb 16, 2015 at 16:16

Rodolfo Jorge Nemer Nogueira

5,1402 gold badges44 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vinaya Kumar Thimmappa Over a year ago

what would be a ideal solution , if i want search results to be displayed on a different page ?

Olatunde Garuba · Accepted Answer · 2015-02-16 22:27:42Z

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; });

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.

Vinaya Kumar Thimmappa · Accepted Answer · 2015-02-28 11:27:22Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Related