ui-listView by StevenLambion (original) (raw)

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.

var appModule = angular.module("app", [ui-listView])

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.

 <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>s</mi><mi>c</mi><mi>o</mi><mi>p</mi><mi>e</mi><mi mathvariant="normal">.</mi></mrow><annotation encoding="application/x-tex">scope.</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.625em;vertical-align:-0.1944em;"></span><span class="mord mathnormal">sco</span><span class="mord mathnormal">p</span><span class="mord mathnormal">e</span><span class="mord">.</span></span></span></span>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

Basic Usage

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

Custom Style

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

Advanced Usage

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