Select Component with an Angular Request

Question

Select Component with an Angular Request

Navigation

#1 by (1 votes)

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 every <option> I want to put a Request of Angular that is in a href

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

angularjs html5 html-select

asked by anonymous 16.10.2017 / 18:21

1 answer

C ++, Program does not solve all Instances! Jquery Form Validation Error div position in select fields [closed]

score 1 · Accepted Answer

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

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 the 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><divng-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>