【问题标题】:Navigate to other state using search box使用搜索框导航到其他状态
【发布时间】:2019-09-04 10:28:13
【问题描述】:

现在我成功地将数据从页面传递到另一个状态。我有一个导航栏搜索框,它的视图完全不同。现在,当我开始在搜索框中输入内容时,列表应通过data.name(在我的数据中)过滤来显示。

单击特定名称后,它应该导航到该特定状态。

现在我可以使用sref 点击侧边栏来做到这一点。我想对搜索框做同样的事情。

导航栏应该有不同的控制器吗?

我可以在搜索框中做 ui-sref 吗?

编辑:- 调用数据的控制器

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

路线:-

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

查看:- 用于侧边栏(与导航栏中的想法相同)

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

【问题讨论】:

标签: angularjs angular-ui-router search-box ui-sref


【解决方案1】:

我相信您需要一个用于导航栏的控制器,但是如果没有一些工作代码就很难。你应该提供一个 fiddle 或 plunker 的代码,以便人们了解你的情况。

我假设当您在搜索框中输入内容时,选项列表将显示在输入下方。列表中的每一项都必须有ui-sref的值,所以当你点击一个时,状态会改变。

同样,这是一个想法。我不知道你的代码是什么样子的。

【讨论】:

  • 是的,你没看错,我从来没有在前端工作过,所以我对搜索框的事情不太了解。我还没有在搜索框上编码 ui-sref。我不明白,虽然我已经在导航栏控制器上调用了数据。我的重定向状态也已准备好,我正在从侧边栏执行此操作。我在 EDIT 中包含状态和控制器
  • @NoobCoder 这是一个带有非常简单的搜索框的小提琴 (jsfiddle.net/MSclavi/p3yLe5x6/1)。我使用div 使其快速,但您可以使用例如列表来实现。您需要做的最后一件事是将其与您的状态和其余代码连接起来,并且可能会对其进行修补,直到它工作为止,您走在正确的道路上! :)
  • 嘿!谢谢 。赞赏
猜你喜欢
  • 2019-10-15
  • 2015-10-24
  • 2016-07-25
  • 1970-01-01
  • 2016-08-10
  • 2015-07-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多