ui-listView for Angular

ui-listView is an efficient, scalable list for large data sets. You simply provide a height and use it similarly to ng-repeat with all the angular bindings you want. Even with a list of 1000 it won't slow down. There's also no static row height. The height is set by the contents of the row dynamically.

Installation

You can add ui-listView through the bower package manager.

bower install ui-listView [--save]

Then include the "ui-listView" module into your angular application.

Infinite Scrolling

ui-listView has an options object to provide extra functionality and API hooks. As the user scrolls, a read-only "range" property is updated on the options object. Watching this property, you can see when the list is at the bottom and then appending a new set of data.

$scope.$watch("listOptions.range", function (range) {
    if (range && range.index + range.length === range.total) {
        loadMoreItems(range);
    }
});
      

API documentation is in the works, but for now check out the README for more information on options.

Examples

  <div class="ui-list-view-bordered" ui-list-view="country in countries | orderBy:'name'">
    {{ country.name }}
  </div>

  <div class="custom-list" ui-list-view="country in countries">
    <div class="country">{{ country.name }}<div>
  </div>
  

.custom-list {
  height: 300px;
  border: solid 1pt darkblue;
  border-radius: 15px;
}

.custom-list .country {
  border-bottom: dashed 1pt darkblue;
  padding: 5px 5px; 
}

<div class="contact-list panel panel-default">
    
    <label>
      <input type="checkbox" ng-model="hideEmail"/> Hide email
    </label>
    
    <div class="panel-heading">
        <input class="form-control" ng-model="search.name" placeholder="Search Name.."/>
    </div>
    
    <div class="panel-body">
        <div class="ui-list-view-bordered" ui-list-view="contact in contacts | filter:search">
            <p class="name"><strong>{{ contact.name }}</strong></p>
            <div class="email text-muted" ng-if="!hideEmail">{{ contact.email }}</div>
        </div>
    </div>
    
</div>