Selector Bar

[
  {
    "group": "red",
    "value": "4"
  },
  {
    "group": "red",
    "value": "5"
  },
  {
    "group": "green",
    "value": "1"
  },
  {
    "group": "green",
    "value": "2"
  },
  {
    "group": "green",
    "value": "3"
  }
]
              

{{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.