Demo > Single Selection Mode

By default, single selection mode will only show reset button and the search field. In the example below, all helper elements are hidden - it now looks like a normal drop down menu.

Go to configs & options section and find "helper-elements" to learn how to hide the helper elements.


 

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"
    ...
    selection-mode="single"
>
</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}} },
];