Passing parameters with dropdown on AngularJS

Question

I'm trying list data according with data choose on a drop down menu.

My service list data with a hardcode (id 6).

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

How do I pass the select item ID to the service?

Dropdown HTML (ng-click doesnt work):

         <!-- 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>

Menu Controller:

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

Service:

.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;
        });
  }
}});

That's was just a test to see if I can set the selected item to a var. — Djonathan Krause
– Djonathan Krause, Commented Mar 29, 2017 at 12:14

Mohammed Gadi · Accepted Answer · 2017-03-29 12:12:33Z

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>

Your Controller

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

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

Your Service

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



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

Remove href from anchor tag and make a function like I have shown in controller. By assuming that your json contains value like Id I have demonstrated it. Hope this code will work for you.

answered Mar 29, 2017 at 12:12

Mohammed Gadi

3915 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Djonathan Krause Over a year ago

Almost there Mohammed! The id var is going to service as 'undefined' what make sense because on load the page I don't choose any option. But on ng-click nothing happens, are we missing something?

Djonathan Krause Over a year ago

Got it! I changed the controller name and forgot it -_- your solution works. Thanks!

Djonathan Krause Over a year ago

Just an observation, the list (its on tab under the dropdown) is not updating, I'll search for how to reload the tab when user change the option on dropdown.

Collectives™ on Stack Overflow

Passing parameters with dropdown on AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related