ui-select-infinity

WebJar for ui-select-infinity

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

github-com-hyzhak-ui-select-infinity
Last Version

Last Version

0.1.5
Release Date

Release Date

Type

Type

jar
Description

Description

ui-select-infinity
WebJar for ui-select-infinity
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/hyzhak/ui-select-infinity

Download github-com-hyzhak-ui-select-infinity

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-hyzhak-ui-select-infinity/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-hyzhak-ui-select-infinity</artifactId>
    <version>0.1.5</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-hyzhak-ui-select-infinity/
implementation 'org.webjars.bower:github-com-hyzhak-ui-select-infinity:0.1.5'
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-hyzhak-ui-select-infinity/
implementation ("org.webjars.bower:github-com-hyzhak-ui-select-infinity:0.1.5")
'org.webjars.bower:github-com-hyzhak-ui-select-infinity:jar:0.1.5'
<dependency org="org.webjars.bower" name="github-com-hyzhak-ui-select-infinity" rev="0.1.5">
  <artifact name="github-com-hyzhak-ui-select-infinity" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='github-com-hyzhak-ui-select-infinity', version='0.1.5')
)
libraryDependencies += "org.webjars.bower" % "github-com-hyzhak-ui-select-infinity" % "0.1.5"
[org.webjars.bower/github-com-hyzhak-ui-select-infinity "0.1.5"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

ui-select-infinity npm version

Extend ui-select with feature of infinity scrolling.

Installing

bower install --save ui-select-infinity

Example

angular
    .module('SomeModule', ['ui-select-infinity'])
    .controller('SomeCtrl', function ($scope, $q) {
        var loadingItem = {type: 'loading'},
            hasNextChunk = true,
            queryString = '';
            
        function getInfinityScrollChunk(id) {
            //implement your lazy data request here
        }
            
        function addLoadingStateItem() {
            $scope.collections.push(loadingItem);
        }

        function removeLoadingStateItem() {
            var index = $scope.collections.indexOf(loadingItem);
            if (index < 0) {
                return;
            }
            
            $scope.collections.splice(index, 1);
        }
        
        
        $scope.isItemMatch = function($select) {
            //implement your match function here by $select.search   
        };
            
        $scope.requestMoreItems = function() {
            if ($scope.isRequestMoreItems || !hasNextChunk) {
                return $q.reject();
            }

            addLoadingStateItem();
            
            $scope.isRequestMoreItems = true;
            return getInfinityScrollChunk(nextChunkId)
                .then(function(newItems) {
                    nextChunkId = newItems.nextId;
                    $scope.items = $scope.items.concat($scope.newItems.items);
                    return newItems;
                }, function(err) {
                    return $q.reject(err);
                })
                .finally(function() {
                    removeLoadingStateItem();
                    $scope.isRequestMoreItems = false;
                });
        };
        
        $scope.refreshList = function() {
            queryString = query;
        };
    });
<ui-select reach-infinity="requestMoreItems()">
    <ui-select-match placeholder="{{placeholder}}">
        {{$select.selected.name}}
    </ui-select-match>
    <ui-select-choices refresh="refreshList($select.search)"
                       refresh-delay="250"
                       repeat="item in items | filter: isItemMatch($select) track by item.id"
                       ui-disable-choice="collection.disabled">
      <span ng-switch="item.type">
        <span ng-switch-when="loading" style="height: 48px;line-height: 48px">
          <i>loading ...</i>
        </span>
        <span ng-switch-when="any">
          {{item.name}}
        </span>
      </span>
    </ui-select-choices>
</ui-select>

Versions

Version
0.1.5