Docs about modal and dropdowns

src/ui/dropdown/README.md

@@ -0,0 +1,158 @@
+## Dropdowns
+
+### [av-dropdown](https://availity.github.io/availity-angular/pages/ui/#/dropdowns)
+
+Wrapper around [Select2 v3.5.2](https://select2.github.io/select2/). Use `ng-options` to pass **Select2** options to the `avDropdown` directive.
+
+```js
+ng-options="{ allowClear: false, placeholder: 'Select your favorite number'}"
+```
+
+### [Simple](https://availity.github.io/availity-angular/pages/ui/#/simple)
+Usage without `ng-options`.
+
+```html
+<select id="dropdownSimple" class="form-control" av-dropdown="" ng-model="vm.selectedNumber" ng-options="{ allowClear: false, placeholder: 'Select your favorite number'}">
+  <option value="">Select One</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+  <option value="4">Four</option>
+  <option value="5">Five</option>
+</select>
+```
+
+### [Array](https://availity.github.io/availity-angular/pages/ui/#/array)
+
+```javascript
+vm.pokemon = ['Aerodactyl', 'Alakazam'];
+```
+
+```html
+<select id="dropdownPoke" class="form-control" av-dropdown="" ng-model="vm.selectedPoke" ng-options="poke for poke in vm.pokemon" options="{ allowClear: false, placeholder: 'Select a Pokemon'}">
+</select>
+```
+
+### [Label for Value in Array](https://availity.github.io/availity-angular/pages/ui/#/label-for-value-in-array)
+
+```javascript
+vm.states = [
+    {
+    'name': 'Alabama',
+    'id': 'AL'
+    },
+    {
+    'name': 'Alaska',
+    'id': 'AK'
+    }
+];
+```
+
+```html
+<select 
+    id="dropdownStates1" 
+    class="form-control" 
+    av-dropdown 
+    ng-model="vm.selectedState1" 
+    ng-options="state.name for state in vm.states" 
+    ng-change="vm.onChange(vm.selectedState1)" 
+    options="{ allowClear: true, placeholder: 'Select State'}"
+>
+</select>
+```
+
+### [Select as Label for Value in Array](https://availity.github.io/availity-angular/pages/ui/#/select-as-label-for-value-in-array)
+
+```html
+<select 
+    id="dropdownStates1" 
+    class="form-control" 
+    av-dropdown="" 
+    ng-model="vm.selectedState1" 
+    ng-options="state.id as state.name for state in vm.states" 
+    ng-change="vm.onChange(vm.selectedState1)" 
+    options="{ allowClear: true, placeholder: 'Select State'}">
+</select>
+```
+
+### [Label for Value in Array Track By](https://availity.github.io/availity-angular/pages/ui/#/label-for-value-in-array-track-by)
+
+```html
+<select 
+    id="dropdownStates1" 
+    class="form-control" 
+    av-dropdown
+    ng-model="vm.selectedState1" 
+    ng-options="state.name for state in vm.states track by state.id" 
+    ng-change="vm.onChange(vm.selectedState1)" 
+    ptions="{ allowClear: true, placeholder: 'Select State'}">
+</select>
+```
+
+### [Multiple](https://availity.github.io/availity-angular/pages/ui/#/multiple)
+
+```html
+<select 
+    id="dropdownMultiple" 
+    class="form-control" 
+    multiple
+    av-dropdown
+    ng-model="vm.selectedStates"
+    ng-options="state.name for state in vm.states track by state.id"
+    ng-change="vm.onChange(vm.selectedStates)"
+    options="{ allowClear: true, placeholder: 'Select State'}">
+</select>
+```
+
+### [Query Large Data-sets](https://availity.github.io/availity-angular/pages/ui/#/query-large-data-sets)
+
+[Select2 v3.5.2](https://select2.github.io/select2/) requires an input field for lazy loading large data sets through queries.  Do not use `ng-options` because Angular does not allow that attribute on `<input>` since `v1.4`.  Instead, extends `AvSelectResource` to easily page large data-sets using `Select2`.
+
+```js
+class DemoPhotosResource extends AvSelectResource {
+
+  constructor() {
+    super({name: 'photos'});
+  }
+
+  getResults(response) {
+    return response.photos;
+  }
+
+  // Optional. Mapping is only need if the item in the collection does not have 
+  // "id" and "text" as attributes.  The "text" is the visible label of the option and
+  // the "id" is the value.
+  mapResult(item) {
+    return {
+      id: item.id,
+      text: item.title
+    };
+  }
+
+}
+```
+
+```js
+// vm is the controller in $scope
+vm.getOptions() {
+  return {
+    allowClear: true,
+    placeholder: 'Find a photo',
+    minimumInputLength: 3,
+    query: demoDropdownResource
+  };
+}
+```
+
+```html
+<div>
+  <label for="dropdownQuery">Photos</label>
+  <input 
+    id="dropdownQuery" 
+    class="form-control" 
+    av-dropdown
+    ng-model="vm.selectedPhoto" 
+    ng-change="vm.onChange(vm.selectedPhoto)" 
+    options="vm.getOptions()">
+</div>
+```

src/ui/modal/README.md

@@ -1,12 +1,11 @@
-## AvModal
+## Modals
 
 ![Modal](./docs/modal.png)
 
+### `avModal`
 
 `avModal` is a service that allows the creation of modal windows.  
 
-### Examples
-
 **Constructor**
 ```js
 
@@ -26,24 +25,24 @@ AvModal.create({
 });
 ```
 
-## Options
+#### Options
 
-### `show`
+##### `show`
 Boolean that triggers modal to immediately show upon creation.  Default is `false`.
 
-### `scope`
+##### `scope`
 Pass `$scope` to the modal's controller.
 
-### `templateUrl`
+##### `templateUrl`
 Url or function that loads the template.
 
-### `controller`
+##### `controller`
 Same as Angular controller.
 
-### `controllerAs`
+##### `controllerAs`
 Same as Angular's controller as syntax.
 
-### `locals`
+##### `locals`
 Values become injectable in the controller based on their key names.
 
 ```js
@@ -54,7 +53,7 @@ AvModal.create({
 });
 ```
 
-## Methods
+#### Methods
 
 ### `AvModal.create`
 Create a modal window on demand without having to call the contructor.