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}}

    Basic | ng-repeat with orderBy filter | Best Practice

    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 as in the code below. 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); }); }

    Using Angular-Isotope event to refresh

    Use an empty iso-method event.

    This is equivalent to calling 'isotope()'

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

    Replicate the add and refresh below:

    Please use "track by".

    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.