sexta-feira, 22 de julho de 2016

Chosen com AngularJS


      O Chosen, ou no nosso caso Angular-Chosen é uma biblioteca para a criação de SELECT's mais bonitos do que o padrão oferecido pelos navegadores. Para isso é necessário baixar os arquivos da biblioteca nos links, http://adityasharat.github.io/angular-chosen e https://github.com/leocaseiro/angular-chosen (Aconselho dar uma olhada nos dois links e escolher de onde vai baixar). Você precisa no final ter os arquivos chosen.css, angular-chosen.js e chosen-sprite.png, além dos arquivos do AngularJS é claro.
<select chosen search-threshold="10" option="controller.lstItens" data-style="btn-primary" ng-change="controller carregarResumo()" ng-model="controller .entidade.tipoItem" ng-options="item.name for item in controller .lstItens track by item.value">
</select>

ng-change: recebe o método que vai ser executado na mudança de valor do select.
ng-model: recebe a variável que vai guardar o valor escolhido do select.
ng-options: recebe item a item a lista de iten s que irá preencher as opções do select.
options: recebe a mesma lista, porém para uso do CHOSEN.
chosen: informa que o select vai usar o chosen.
search-threshold=”10”: vai habilitar um campo de busca se a lista passar de 10 itens.

      Acho que dispensa a apresentação do código do controller, uma vez que lá eu devo ter uma lista de itens chamada lstItens e esses objetos do tipo item precisam ter as propriedades name, tipoItem, e demais campos de um item.

     Porém vale lembrar de adicionar a dependência no app:

angular.module('imeuApp', [ 'angular.chosen' ]);

     É isso.
  

Nenhum comentário:

Postar um comentário