Select component with an Angular request

Asked

Viewed 168 times

1

I have a select component 

<select class="selectpicker" data-live-search="true">
        <option data-tokens="distrito">Distrito</option>
        <option data-tokens="bairro">Bairro</option>
        <option data-tokens="municipio">Município</option>
</select>

and in each <option> I want to put a request from Angular that is in a href

<a href="/municipios">Busca Municípios</a>
angularjs html5 html-select

  • is a little confused your question, on click of option you mean? the request link that is on a href?

  • yes, the request link is in a href and I want to put in a component select that when selected calls that request

1 answer

1


There are some ways to do what you want, the first is to invoke the click on change, thus:

document.getElementsByClassName('selectpicker')[0].addEventListener('change', handleEvent);

function handleEvent() {
  console.log(this.value);
  switch (this.value) {
    case 'Município':
      document.getElementById('municipio').click();
  }
}
<select class="selectpicker" data-live-search="true">
            <option data-tokens="distrito">Distrito</option>
            <option data-tokens="bairro">Bairro</option>
            <option data-tokens="municipio">Município</option>
</select>

<a id="municipio" href="/municipios">Busca Municípios</a>

A second option is to control in Angular. Example:

angular.module('select', []).controller('ctrl', function($http, $scope) {

  $scope.handleEvent = function() {
    console.log($scope.opcao);
    switch($scope.opcao) {
      case 'Município':
        // efetuar uma requisicao http
        break;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="select" ng-controller="ctrl">
  <select class="selectpicker" data-live-search="true" ng-model="opcao" ng-change="handleEvent()">
        <option data-tokens="distrito">Distrito</option>
        <option data-tokens="bairro">Bairro</option>
        <option data-tokens="municipio">Município</option>
</select>

  <a href="/municipios">Busca Municípios</a>
</div>

Browser other questions tagged angularjs html5 html-select

You are not signed in. Login or sign up in order to post.