Demo > Disabling / Enabling

You can disable the directive, as well as each selection item in it. As you might have guessed, you can do this programmatically, on the fly. When the directive is disabled, You can still toggle the dropdown button and see the items, but some of the directive's button will be hidden.


Disable / enable the directive

Click one of the buttons below to disable or enable the directive.

Disable / enable singular item

You need to use disable-property attribute to define which object is disabled / enabled. Click one of the buttons below to disable or enable the first browser.


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"
    ...
    disable-property="disabled"
    is-disabled="disableDir"
>
</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}} },
];