Search code examples
angularjsangular-ui-routersearch-boxui-sref

Navigate to other state using search box


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

Solution

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