Chips

Usage

Default

<div class="oui-doc-preview-only-keep-children" style="width: 300px; margin-bottom: 15px;">
<oui-chips items="$ctrl.items"></oui-chips>
</div>

Stacked

<div class="oui-doc-preview-only-keep-children" style="width: 300px; margin-bottom: 15px;">
<oui-chips items="$ctrl.items" stacked></oui-chips>
</div>

Closable

<div class="oui-doc-preview-only-keep-children" style="width: 300px; margin-bottom: 15px;">
<oui-chips items="$ctrl.items" closable></oui-chips>
</div>

Events

Note: If you want to access the parameters inside on-remove callback, you need to use items or removed variables as below.

• items return the new array
• removed return the removed part

<div class="oui-doc-preview-only-keep-children" style="width: 300px; margin-bottom: 15px;">
<oui-chips items="$ctrl.itemsValue" on-remove="$ctrl.onRemove(items, removed)" closable></oui-chips>
</div>
<div class="oui-doc-preview-only">
    <button class="oui-button oui-button_primary" type="button" ng-click="$ctrl.addItem()">Add item</button>
    <p><strong>Items value:</strong> {{$ctrl.itemsValue | json}}</p>
    <p><strong>onRemove 'items' value:</strong> {{$ctrl.changedValue | json}}</p>
    <p><strong>onRemove 'removed' value:</strong> {{$ctrl.removedValue | json}}</p>
</div>

API

Attribute	Type	Binding	One-time Binding	Values	Default	Description
items	object	=	no	n/a	n/a	items bound to component
closable	boolean	<?	yes	true, false	false	closable flag
stacked	boolean	<?	yes	true, false	false	stacked flag
on-remove	function	&	no	n/a	n/a	handler triggered when items are removed