使用AngularJS下拉列表传递参数

时间:2017-03-29 12:03:41

标签: javascript angularjs angular-services angular-controller

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

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

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

如何将选择项目ID传递给服务?

Dropdown

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

1 个答案:

答案 0 :(得分:2)

 <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 之类的值,我已经证明了这一点。希望这段代码能为你效劳。