通过 AngularJS 上的下拉菜单传递参数

Question

我正在尝试根据下拉菜单中选择的数据来列出数据。

我的服务列表数据带有硬编码 (id 6)。

    var url = 'http://localhost:3854/listarServicosByEstab/' + '6'; // Hardcode!

如何将 select 项目 ID 传递给服务？

下拉菜单 HTML（ng-click 不起作用）：

         <!-- Combobox -->            
        <div class="row">
            <div class="dropdown" ng-controller="EstabelecimentosPageCtrl">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdown_estabelecimentos" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Estabelecimentos
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdown_estabelecimentos" >
                    <li>
                        <a ng-repeat="estab in listaDeEstabelecimentos" href="#" ng-click="$parent.current = item">
                            {{estab.nomeEstab}}
                        </a>
                    </li>
                </ul>
                Choose Test: {{item}}
            </div>
        </div>

菜单控制器：

.controller('ListServicoCtrl', function($scope, $state, ListServicoService) {
ListServicoService.listarServicos().then(function(dados){
    $scope.listaDeServicos = dados;
});  });

服务：

.service('ListServicoService', function($http){

var url = 'http://localhost:3854/listarServicosByEstab/' + '6'; // Hardcode!

return{
  listarServicos : function (){
      return $http.get(url).then(function(response){
          return response.data;
        });
  }
}});

Answer 1

 <div class="row">
            <div class="dropdown" ng-controller="EstabelecimentosPageCtrl">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdown_estabelecimentos" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Estabelecimentos
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdown_estabelecimentos" >
                    <li>
                        <a ng-repeat="estab in listaDeEstabelecimentos"   ng-click="passdata(estab.Id)">
                            {{estab.nomeEstab}}
                        </a>
                    </li>
                </ul>
                Choose Test: {{item}}
            </div>
        </div>

您的控制器

.controller('ListServicoCtrl', function($scope, $state, ListServicoService) {

$scope.passdata = function(id){
ListServicoService.listarServicos(id).then(function(dados){
    $scope.listaDeServicos = dados;
});
} });

您的服务

.service('ListServicoService', function($http){



return{
  listarServicos : function (id){
      return $http.get('http://localhost:3854/listarServicosByEstab/' + id).then(function(response){
          return response.data;
        });
  }
}});

从锚标记中删除 href 并创建一个像我在控制器中显示的函数。通过假设你的 json 包含像 Id 这样的值，我已经证明了它。希望这段代码对你有用。

通过 AngularJS 上的下拉菜单传递参数

Passing parameters with dropdown on AngularJS

javascript

angularjs

angular-services

angular-controller