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

extension of angular 1 ui-select to support infinity list of items
https://github.com/hyzhak/ui-select-infinity

Last synced: about 21 hours ago
JSON representation

extension of angular 1 ui-select to support infinity list of items

• Host: GitHub
• URL: https://github.com/hyzhak/ui-select-infinity
• Owner: hyzhak
• License: mit
• Created: 2015-06-10T15:42:56.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-06-26T11:41:43.000Z (over 6 years ago)
• Last Synced: 2024-10-10T15:19:16.376Z (27 days ago)
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 32
• Watchers: 6
• Forks: 18
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ui-select-infinity [![npm version](https://badge.fury.io/js/ui-select-infinity.svg)](http://badge.fury.io/js/ui-select-infinity)

Extend `ui-select` with feature of infinity scrolling.

## Installing

```

bower install --save ui-select-infinity

```

## Example

```javascript

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;

        };

    });

```

```html

    

        {{$select.selected.name}}

    

    

      

        

          loading ...

        

        

          {{item.name}}

        

      

    

```