Tag Dropdown

Regular Tag Dropdown with multiple selections.

Model:

HTML

<div class="t-content" ng-controller="tagDropdownExampleController">
    <inv-tag-dropdown
            placeholder="Select..."
            empty-placeholder="No more remaining options."
            options="selectableChoices"
            ng-model="model">
    </inv-tag-dropdown>
    <p>Model: <span ng-bind="model"></span></p>
</div>

Tag Dropdown with Categories

Tag Dropdown with nested categories for better structure.

Model:

HTML

<div class="t-content" ng-controller="tagDropdownExampleController">
    <inv-tag-dropdown
            placeholder="Select..."
            empty-placeholder="No more remaining options."
            options="selectableChoicesCategories"
            ng-model="modelCategories">
    </inv-tag-dropdown>
    <p>Model: <span ng-bind="modelCategories"></span></p>
</div>

Tag Dropdown with API search

For when the list is so large you need to call the API.

Model:

HTML

<div class="t-content" ng-controller="tagDropdownExampleController">
    <inv-tag-dropdown
            placeholder="Select..."
            empty-placeholder="No more remaining options."
            options-search-action="actionCall"
            options-search-selector="selectorChoicesSelector"
            ng-model="modelApi">
    </inv-tag-dropdown>
    <p>Model: <span ng-bind="modelApi"></span></p>
</div>

Tag Dropdown with required

Regular Tag Dropdown with required/ng-required attribute (at least 1 selected)

Select one

Model:

HTML

<div class="t-content" ng-controller="tagDropdownExampleController">
    <ng-form name="requiredForm" class="c-generalForm">
        <fieldset class="c-fieldset c-fieldset--titled">
            <div form-field-error-state="selectOne" class="c-fieldset-item is-required" ng-required>
                <label for="tlist">Select one</label>
                <inv-tag-dropdown
                    id="tlist"
                    placeholder="Select..."
                    empty-placeholder="No more remaining options."
                    options="selectableChoices"
                    ng-model="requiredModel"
                    name="selectOne"
                    required>
                </inv-tag-dropdown>
                <form-field-error-messages name="selectOne"></form-field-error-messages>
            </div>
        </fieldset>
        <p>Model: <span ng-bind="requiredModel"></span></p>
    </ng-form>
</div>

Tag Dropdown with create

Regular Tag Dropdown with ability to create new

Model:

HTML

<div class="t-content" ng-controller="tagDropdownExampleController">
    <inv-tag-dropdown
        placeholder="Select..."
        empty-placeholder="No more remaining options."
        options="selectableChoices"
        allow-custom="true"
        create-new-placeholder=" (create new)"
        ng-model="model">
    </inv-tag-dropdown>
    <p>Model: <span ng-bind="model"></span></p>
</div>