Angular-Isotope Example orderBy

Mark Allen Hall - Mankind Software

Selector-Based Filter

Selector and Value-Based Sort

Scripted Change

ng-repeat with orderBy

  • ...
    • {{x.name}}
      {{x.date | date}}
      {{x.number}}

    xList

    Live view of this demo's array.

    {{xList}}

    Using ng-repeat with orderBy and other filters

    Added Elements are not Positioned

    Angular-Isotope looks for the last item in the array before the Isotope mode is refreshed. Adding a new item to the original array does not refresh Isotope because it is not considered the last item in the orderBy scenario.

    if (attrs.ngRepeat && true === scope.$last) { element.ready(function() { return $timeout((function() { return scope.refreshIso(); }), config.refreshDelay || 0); }); }

    Use Angular-Isotope event to refresh

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

    Example

    Please use "track by".

    The added item is denoted as $last when "track by" is used. This is recommended.

    Ng-repeat's "track by" allows a key to be specified, for example "name" or "id", by which a model is reassociated with a pre-existing DOM element/Isotope model. The more proactive DOM element management required of Angular, to track and reuse elements, has the advantage of letting the Isotope DOM be consistent with the Angular model, without any added $watch, refresh, or similar mechanisms.