Demo > Helper Elements

You can define which helper elements to be displayed by using attribute helper-elements, such as:

View
Controller

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"
    ...
    helper-elements="all filter"
>
</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}}
                    },
                
            ];

Other examples

The attribute accepts a combination of "all none filter reset", in space separated string. Example:

helper-elements="filter": will display the search (filter) field only
helper-elements="all none": will display the "Select all" and "Select none" buttons
helper-elements="": will display no helper elements at all

Note When the directive is disabled (using is-disabled property), the helper elements will be disabled except the filter field. The purpose is to allow you to search and see the selection state even when the directive is disabled.