Angular-Isotope Example Basic

Mark Allen Hall - Mankind Software

Selector-Based Filter

Selector and Value-Based Sort

Click an Item to Remove

Basic ng-repeat

  • ...
    • {{x.name}}
      {{x.date | date}}
      {{x.number}}
    • extra
      {{'1360313309421' | date}}
      Twenty

    xList

    Live view of this demo's array.

    {{xList}}

    Basic | ng-repeat with orderBy filter | Best Practice

    ng-repeat

    Angular-Isotope is focussed on AngularJS's "ng-repeat" iteration directive to mass-produce Isotope tiles.

    For each item in the given Angular array, an Isotope tile is stamped from the element block specified by "isotope-item".

    • {{x.name}}
      {{x.date|date}}
      {{x.number}}
    • extra
      {{'1360313309421' | date}}
      Twenty

    The "isotope-container" directive defines the bounds of the Isotope wrapper.

    The "isotope-item" directive uses its element block as the template for the Isotope tile.

    Note that the "extra" tile is created independant of the example xList array.

    Angular-Isotope Events

    Angular-Isotope listens for the following events and passes the data to Isotope's corresponding option or method command.

    $scope.$emit('iso-option', {options}; $scope.$emit('iso-method', {name:methodName, params:optionalParameters};

    Metafizzy Isotope APIs options | methods

    Example

    $emit('iso-method', {name:'shuffle', params:null})

    opt-kind directive for sortBy and filters

    A filter uses a JQuery selector (attribute, class, or id) to reduce by category. A sortBy uses the JQuery selector to get a value for comparison.

    The "opt-kind" directive specifies a "filter" or "sortBy" key for an element group. For each element in that group, "ok-sel" specifies the selector, and makes that element clickable to invoke the sort or filter.

    Selector-Based Filter

    Selector and Value-Based Sort

     The "opt-kind" directive is either "sortBy" or "filter", which corresponds to the same-named Isotope configuration keys.

    The element becomes clickable and emits a message to the isotope-container when clicked. .

    Each element uses the "ok-sel" attribute for indicating a JQuery selector, and additionally for "sortBy, an "ok-type" attribute (e.g. Integer) to indicate the type-casting for the element's string value in the sort's comparisons.

    Removing an element

    Deleting an item from the Angular array automatically removes it from the Isotope container.

    Note that the "extra" item is added to the Isotope container directly and cannot be removed this way.