Instalação Bower:


Importe o arquivo JavaScript:
<script src="bower_components/ng-ui-multi-select/dist/ng-ui-multi-select.min.js"></script>
E também o arquivo CSS:
<link rel="stylesheet" href="bower_components/ng-ui-multi-select/dist/ng-ui-multi-select.min.css"/>

Instalação NPM:


Importe o arquivo JavaScript:
<script src="node_modules/ng-ui-multi-select/dist/ng-ui-multi-select.min.js"></script>
E também o arquivo CSS:
<link rel="stylesheet" href="node_modules/ng-ui-multi-select/dist/ng-ui-multi-select.min.css"/>

Importação do módulo:

angular.module('app', ['ngUiMultiSelect']);

Exemplos:

  • Array - Opções de um array simples
  • Tagging - Possibilitar que o usuário adicione items.
  • Array Async - Possibilitar que as opções sejam assíncronas.

ui-multi-select

Diretiva principal, cria uma input na tela para que o usuário possa selecionar seus itens.

Atributo Descrição
ng-model [Array] Nome da variável que será armazenado os itens selecionados pelo usuário.
ng-disabled [Boolean] Você pode desabilitar todo componente, bloqueando remover ou adicionar items.
placeholder [String] Texto que será mostrado dentro da input.
close-on-select-item [Boolean] - Atributo que decide se vai fechar ou não a caixa de opções.
on-selected [Function] - Função executada ao selecionar um novo item. Ex: minhafuncao(value);
on-remove [Function] - Função executada ao remover um item. Ex: minhafuncao(value);
tagging [Function] - Função que será executada ao teclar enter para adicionar objeto na lista.
tagging-model [Array] - Opções disponíveis para selecionar.

ui-multi-select-item

Diretiva responsavél por criar os templates dos itens que estarão selecionados dentro da input.

Atributo Descrição
ng-value [*] Informe o item do ng-repeat para conhecermos seu objeto.
ng-disabled [Boolean] Você pode desabilitar algum item, bloqueando remove-lo quando for adicionado.

ui-multi-select-option

Diretiva responsavél por mostrar as opções que ainda estão disponíveis para usuário selecionar.

Atributo Descrição
ng-value [*] Informe o item do ng-repeat para conhecermos seu objeto.
ng-disabled [Boolean] Você pode desabilitar alguma opção, bloqueando adiciona-la no array.