LRpbLK

index.html

<div ng-app="app">
  <div ng-controller="main">
    <div ng-repeat="type in types">
      <h1>{{type}} Lists</h1>

      <div class="list" ng-class="{current: isCurrentList(type, $index)}" ng-repeat="list in lists | hasType:type">
        <div>{{list.created_on}}</div>
        <ul>
          <li ng-repeat="item in list.items | filter:{'type': type} | shouldLoadItem:isLoadedList(type, $index)">{{item}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

lrpblk.markdown

LRpbLK

A Pen by Reyaz Rohani on CodePen.

License.

script.js

var app = angular.module('app', []);

app.controller('main', ['$filter', '$q', '$scope', 'Lists', mainController]);

app.factory('Lists', ['$q', '$timeout', listsFactory]);

app.filter('hasType', ['$filter', hasTypeFilter]);

app.filter('shouldLoadItem', [shouldLoadItemFilter]);

function mainController($filter, $q, $scope, Lists) {
  var currentList = {'a': 0, 'b': 0};

  var requestCount = 0;

  var getInfoPromise = Lists.getInfo();

  $scope.types = ['A', 'B'];
  $scope.lists = [];
  $scope.isCurrentList = function(type, index) {
    if (currentList[type.toLowerCase()] === index) {
      return true
    }

    return false
  };
  $scope.isLoadedList = function(type, index) {
    if (currentList[type.toLowerCase()] === index) {
      return true
    }

    if (currentList[type.toLowerCase()] === index - 1) {
      return true
    }

    if (currentList[type.toLowerCase()] === index + 1) {
      return true
    }

    return false
  };

  getInfoPromise.then(function (response) {
    $scope.lists = response;
  });

  $q.all([getInfoPromise]).then(function () {
    getNextListOfType('C').then(function (response) {
      console.log(response);
    });
  });

  function getNextList() {
    return $q(function (resolve) {
      var index = requestCount++;

      console.log('Getting list: ' + index);

      Lists.getItems(index).then(function (response) {
        resolve({index: index, items: response});
      });
    });
  }

  function getNextListOfType(type) {
    return $q(function (resolve) {
      if (requestCount === $scope.lists.length) {
        resolve()

        return
      }

      getNextList().then(function (response) {
        $scope.lists[response.index].items = response.items;

        if (hasType(response.items, type)) {
          console.log('found one!');
          resolve(response);
        } else {
          getNextListOfType(type).then(function(response) {
            resolve(response);
          });
        }

        function hasType(items, type) {
          return $filter('filter')(items, {type: type}).length > 0;
        }
      });
    });
  }
}

function listsFactory($q, $timeout) {
  var lists = [
    {
      "created_on": "2016-01-01T00:00:00",
      "items": [
        {"type": 'A'}
      ]
    },
    {
      "created_on": "2016-01-15T00:00:00",
      "items": [
        {"type": 'A'},
        {"type": 'B'}
      ]
    },
    {
      "created_on": "2016-02-01T00:00:00",
      "items": [
        {"type": 'B'}
      ]
    },
    {
      "created_on": "2016-02-15T00:00:00",
      "items": [
        {"type": 'A'},
        {"type": 'B'}
      ]
    },
    {
      "created_on": "2016-03-01T00:00:00",
      "items": [
        {"type": 'A'}
      ]
    },
    {
      "created_on": "2016-03-15T00:00:00",
      "items": [
        {"type": 'B'}
      ]
    },
    {
      "created_on": "2016-03-01T00:00:00",
      "items": [
        {"type": 'A'},
        {"type": 'B'}
      ]
    },
    {
      "created_on": "2016-03-15T00:00:00",
      "items": [
        {"type": 'A'},
        {"type": 'B'}
      ]
    }
  ];

  return {
    getInfo: getInfo,
    getItems: getItems
  }

  function getInfo() {
    var info = [];

    angular.forEach(lists, function(list) {
      info.push({"created_on": list.created_on});
    });

    return $q(function (resolve) {
      $timeout(function () {
        resolve(info);
      }, 1000);
    });
  }

  function getItems(index) {
    return $q(function (resolve) {
      $timeout(function () {
        resolve(lists[index].items || []);
      }, 1000);
    });
  }
}

function hasTypeFilter($filter) {
  return function(input, type) {
    var output = [];
    
    for (var i = 0; i < input.length; i++) {
      var items = $filter('filter')(input[i].items, {type: type});

      if (typeof items === 'object' && items.length > 0) {
        output.push(input[i]);
      }
    }

    return output
  }
}

function shouldLoadItemFilter() {
  return function(input, isLoaded) {
    return isLoaded ? input : []
  }
}

// http://stackoverflow.com/questions/14796087/filter-results-6-through-10-of-100-with-ng-repeat-in-angularjs
// 
// app.filter('slice', [sliceFilter]);
// 
// function sliceFilter() {
//   return function(input, start, end) {
//     return input.slice(start, end);
//   }
// }

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>

style.scss

.list {
  opacity: 0.25;
  &.current {
    opacity: 1;
  }
}