Demo > Minimum

This is the minimum configuration required by the directive. Just define your input and output, choose the input-object's property that you want to use as item & button labels, as well as the property that represents the selection state of an item. For most of you, this would be enough.


 

Define your directive:

<div
    isteven-multi-select
    input-model="modernBrowsers"
    output-model="outputBrowsers"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
>
</div>

Define your input-model:

$scope.modernBrowsers = [
  { icon: "{{removeHost(row.icon)}}", name: "{{row.name}}", maker: "{{row.maker}}", ticked: {{row.ticked}} },
];
Output model

Look at the output-model below to see the values getting updated as you select / deselect an item in the directive. Icons in the objects are actually full HTML img tag, shortened for simplicity.

$scope.outputBrowsers = [
  { icon: "{{removeHost(row.icon)}}", name: "{{row.name}}", maker: "{{row.maker}}", ticked: {{row.ticked}} },
];