Angular Dataform

Reliable, componentized data form controls for AngularJS.

Code on Github Download

Getting Started

Setup is easy and designed to be highly modular. Just follow these steps in order:

  1. Include AngularJS
  2. Include Angular Dataform in one of the following ways:
    • Include the entire library (located in the /dist directory)
    • Include /common/module.js and any directives you wish to use
  3. Add the 'dataform' module as a dependency: 
    angular.module('myModule', ['dataform'])

Autocomplete datalist

What?

Adds autocomplete menus to input fields. Inspired by the HTML5 <datalist> element.

City: {{cityName}}

Active index: {{activeIndex}}

  1. {{c.name}}
  2. {{cityName}} (add new city)

How?

<input ng-model="cityName" df-autocomplete-datalist="cities">
<ol df-datalist id="cities">
  <li ng-repeat="c in cities|filter:{name:cityName}|limitTo:5"
          df-value="c.name">{{c.name}}</li>
  <li ng-show="query" df-value="query">
    {{query}} <span>(add new city)</span>
  </li>
</ol>
  • Create an <input> with df-autocomplete-datalist="some-id", where #some-id is the corresponding list element (below).
  • Create an <ol df-datalist id="some-id">. Any list item with a df-value="expr" attribute will be selectable. Use ng-repeat or any other AngularJS/HTML to build the list of autocomplete choices.
  • To select the first list item by default (instead of having no selection), specify df-initial-selection=0 on the <ol>.

Tags

What?

A tag list bound to an array that lets you add/remove tags and customize the way tags are displayed.

Horizontal

  1. {{tag}}

Horizontal (add on new line)

  1. {{tag}}

Vertical

  1. {{tag}}

How?

<ol df-tag-list items="tags">
  <li df-tag ng-repeat="tag in items">
    <a ng-href="#{{tag}}">{{tag}}</a>
  </li>
  <li df-tag-add></li>
</ol>
  • Add df-tag-list and items="arrayExpr" to an OL or UL.
  • Add list items with df-tag (likely using ng-repeat to loop over items, which is equal to your arrayExpr).
  • If you want a way to add new tags, add a list item with df-tag-add. You can leave its contents empty to use the default form, or you can specify your own form (it must contain both a <form> and <input>).

Object Input

What?

An input field that has an object-valued ngModel and displays one of the object's fields.

{{obj|json}}

How?

<input df-object-input ng-model=obj display-field="color">

Object Autocomplete

What?

Autocomplete objects, not just strings.

City: {{city}}

  1. {{c.name}}
  2. {{city.name}} (add new city)

How?

<form>
  <input ng-model="city" df-object-input display-field="name"
         df-autocomplete-datalist="cityObjects" placeholder="City">
  <button ng-click="city = null" ng-show="city.name">Reset</button>
</form>
<ol df-datalist id="cityObjects">
  <li ng-repeat="c in cities|filter:{name:city.name}|limitTo:5"
      df-value="c">{{c.name}}</li>
  <li ng-show="city.name" df-value="{name: city.name, new: true}">
    {{city.name}} <span>(add new city)</span>
  </li>
</ol>

Object Tags Autocomplete

What?

Use autocomplete to input a list of tags that represent objects. Fetch autocomplete suggestions from an asynchronous datasource.

Input: {{newCity}}

Cities: {{selectedCities}}

  1. {{c.name}}
  1. {{c.name}}
  2. {{newCity.name}} (add new city)

Controller

function CitiesCtrl($scope, $timeout) {
  $scope.selectedCities = [];

  $scope.$watch('newCity.name', function(name) {
    if (name && name.length >= 2) {
      $timeout(function() { // Simulate delay
        $scope.cities = CITIES.filter(function(c) {
          return c.name.toLowerCase().indexOf(name.toLowerCase()) !== -1;
        });
      }, 500);
    } else {
      $scope.cities = [];
    }
  });
}

How?

<ol df-tag-list items="selectedCities" class="horizontal">
  <li df-tag ng-repeat="c in items"><a ng-href="#{{c.name}}">{{c.name}}</a></li>
  <li df-tag-add ng-model="newCity">
    <form>
      <input ng-model="newCity" df-object-input display-field="name"
             df-autocomplete-datalist="cityObjects2"
             df-autocomplete-submit-on-select
             placeholder="City">
    </form>
  </li>
</ol>
<ol df-datalist id="cityObjects2">
  <li ng-repeat="c in cities|filter:{name:newCity.name}|limitTo:5" df-value="c">
    {{c.name}}
  </li>
  <li ng-show="newCity.name" df-value="{name: newCity.name, new: true}">
    {{newCity.name}} <span>(add new city)</span>
  </li>
</ol>

Object Tags

What?

Display and add tags that represent objects, not strings.

Colors: {{colors}}

  1. {{tag.color}} 
<ol df-tag-list items="colors" class=horizontal>
  <li df-tag ng-repeat="tag in items">
    <a ng-href="#{{tag.color}}">{{tag.color}}</a>
  </li>
  <li df-tag-add ng-model="newTag" ng-init="newTag={color:''}">
    <form>
      <input ng-model="newTag" placeholder="Color"
             df-object-input display-field="color">
    </form>
  </li>
</ol>