caph-dropdown-list

caph-dropdown-list provides users with toggleable list that allows the user to choose one from a predefined list.

Attributes

Dropdown list can have several attributes like below

items

Dropdown list needs a specific format to work with JSON. It is array type of the object and each item has two required fields: id & content. Each item of the list is represented by an object. So all objects should be arranged by you want to show.

id (required) : identifier of each item. It is used as parameter of 'on-select-item' callback function.
content (required) : string or tags, it is served as the item content.
disabled : If the item should be not selectable, this should be set to true.
```
[
  {id: 'copy', content: 'Copy'},
  {id: 'cut', content: 'Cut'},
  {id: 'paste', content: 'Paste', disabled: true},
  {id: 'forward', content: 'Forward'}
]
```
If you need any other properties in template, define it on each object. Then you can use it on item template.

visible-item-count
Used to limit item count to view. If this value is set and item count is bigger than it, arrow buttons will be show on list.

focus-option
Values to be set on this dropdown list. If you need to know more information, refer to focus directive document.

on-select-item
the callback function of the select event on each item. This function can have parameters as '$itemId' and '$event'. '$itemId' is the item's id user select. '$event' is event object of jQuery.

Templates

Dropdown list provides 4 templates for customizing. Your code in the templates will be place in predefined 'div' tags.

item template

User can decorate each item of list using 'caph-dropdown-list-item-template' tag. In this tag, you can use properties of each item.

 [item]
 {id: 'korea', content: 'Korea, KR', textColor: 'blue'}

 [template]
 <caph-dropdown-list>
     <caph-dropdown-list-item-template>
         <span style="color:{{textColor}}">{{content}}</span> ({{id}})
     </caph-dropdown-list-item-template>
 </caph-dropdown-list>

When you use this template, you can see dom structure like below

 <div class="caph-dropdown-list">
     <div class="textbox">
         <div class="label">
             <span style="color:blue;">Korea, KR</span> (korea)
         </div>
     </div>
 </div>

placeholder template

User also can decorate placeholder using 'caph-dropdown-list-placeholder-template' tag.

 <caph-dropdown-list>
     <caph-dropdown-list-placeholder-template>
         <div class="textbox"><div class="label">Action</div></div>
         <div class="button"><div class="label">▽</div></div>
     </caph-dropdown-list-placeholder-template>
 </caph-dropdown-list>

After that, you can see 'action' and '▽' in placeholder area.

 <div class="caph-dropdown-list">
     <div class="placeholder">
         <div class="textbox">
             <div class="label">
                 <div class="textbox"><div class="label">Action</div></div>
                 <div class="button"><div class="label">▽</div></div>
             </div>
         </div>
     </div>
 </div>

'textbox' and 'button' classes are pre-defined for the most popular dropdown list. 'textbox' class has properties 'width 95%, vertical align middle'. 'button' class has properties 'float right, width 40px'. If you don't want to see this style, you can change this tags and classes.

arrow-up / arrow-down button templates

If the dropdown list need to be scrolled, user can define arrow buttons using 'caph-dropdown-list-arrow-up-template' and 'caph-dropdown-list-arrow-down-template' If it is not defined, dropdown list will not show you arrow buttons.

 <caph-dropdown-list-arrow-up-template>▲</caph-dropdown-list-arrow-up-template>
 <caph-dropdown-list-arrow-down-template>▼</caph-dropdown-list-arrow-down-template>

Example

 var myApp = angular.module('myApp', ['caph.ui']);

 myApp.controller('myController', ['$scope', function($scope) {
     $scope.list1 = {
         items: [
             {id: 'copy', content: 'Copy'},
             {id: 'cut', content: 'Cut'},
             {id: 'paste', content: 'Paste', disabled: true},
             {id: 'forward', content: 'Forward'}
         ]
     };
     $scope.selectItem = function($itemId, $event) {
         $scope.selectedItem = $itemId;
     };
 }]);

html

 <caph-dropdown-list focus-option="{depth: 0}" items="list1.items" on-select-item="selectItem($itemId, $event)">
     <caph-dropdown-list-placeholder-template>
         <div class="textbox"><div class="label">Action</div></div>
         <div class="button"><div class="label">▽</div></div>
     </caph-dropdown-list-placeholder-template>
     <caph-dropdown-list-item-template>{{content}}</caph-dropdown-list-item-template>
 </caph-dropdown-list>