<sb-bar options="options" ng-model="selectedObject">
</sb-bar>
options
[
{
"group": "red",
"value": "4"
},
{
"group": "red",
"value": "5"
},
{
"group": "green",
"value": "1"
},
{
"group": "green",
"value": "2"
},
{
"group": "green",
"value": "3"
}
]
selectedObject
{{selectedObject | json}}
Temos aqui representada uma diretiva AngularJS de nome sbBar, composta de um atributo options que recebe um array de objetos e um ngModel que expõe um segundo array dinâmico de objetos em selectedObject. O array selectedObject é montado de acordo com os seletores selecionados na selector bar e o array vindo de options.
Cada seletor colorido da selector bar representa um dos objetos contidos no array options exceto os seletores cinzas que são meros placeholders.
A selector bar é criada dinamicamente de acordo com o valor do array options. Os objetos deste array com propriedade group igual a red são colocados a esquerda da barra. Os objetos com propriedade group igual a green são colocados após os seletores vermelhos. A quantidade de placeholders é definida dentro de um valor constant interno.
Os objetos são adicionados ou retirados do array selectedObject na ordem que são selecionados.
Use CTRL para selecionar mais de um seletor.