Navigate to other state using search box

Question

Right now I am successfully passing data to another state from a page. I have a navbar search box which is in a completely different view. Now when I start typing in the search box, the list should be shown by filtering by data.name (in my data).

Upon clicking on particular name, it should navigate to that particular state.

Right now I can do this by using sref clicking on the sidebar. I want to do the same with the search box.

Should there will be different controller for navbar ?

Can I do ui-sref in search box ?

EDIT:- controller for calling data

app.controller('navController', ['$scope', '$http', '$state' , '$stateParams' , function($scope, $http, $state , $stateParams) {

        $scope.UserData = function(){
            var req = {
                method: 'GET',
                url: './pdata.json',
            }
            $http(req).then(function successCallback(response) {            
                $scope.viewuser = response.data;  
                    console.log($scope.viewuser);
            }, function errorCallback(response) {                
                $scope.message = "error";           
            });
        }
       $scope.UserData();
}]);

Route:-

.state('home.userTest', {
            url: '/view-userTest/:name',
            templateUrl: 'views/dashboard/routeUser.html',          
            controller: 'receive'
   })

View :- for side bar (same idea i want in navbar)

<p ng-repeat="o in viewuser">
   <a ui-sref="home.userTest({name: o.name})">

Possible duplicate of [Calling an angularjs ui-router state from within a controller](https://stackoverflow.com/questions/28133684/calling-an-angularjs-ui-router-state-from-within-a-controller) — georgeawg, Apr 14 '19 at 07:22
@georgeawg I don't think so. I can successfully pass data by using `ui-sref`. My concern is anyway if I can do it from search box list. — NoobCoder, Apr 14 '19 at 07:33

MSclavi · Accepted Answer · 2019-04-14T06:23:51.067

1

I believe you need a controller for the navbar, but it is hard without some working code. You should provide a fiddle or plunker with code so people can understand your situation.

I'll asume when you type in the searchbox, a list of options will be display below the input. Each of the items in the list must have the ui-sref value, so when you click on one, the state will change.

Again, this is an idea. I don't know how your code looks.

edited Apr 14 '19 at 06:23

answered Apr 14 '19 at 06:07

MSclavi

427
2
10

Yes, you got it right, I never worked on frontend so I have less idea of search box things. I haven't code ui-sref on search box yet. I am not getting idea , although I have called data on navbar controller. My state for redirection is also ready which I am doing from sidebar. I am including the state and controller in EDIT – NoobCoder Apr 14 '19 at 06:27
@NoobCoder here is a fiddle (https://jsfiddle.net/MSclavi/p3yLe5x6/1/) with a really simple search box. I used `div` to make it quick, but you can make it with a list for example. The last thing you need to do is wire this with your states and the rest of your code and maybe tinker with it until it works, you are on the right path! :) – MSclavi Apr 14 '19 at 15:15
Hey ! Thanks . Appreciated – NoobCoder Apr 15 '19 at 09:21

Navigate to other state using search box

1 Answers1