The ui-select directive to a select and multi-select control with a search feature, I have to say is a control very useful. You can use it with a static list or dynamically getting data from a server.

In this post, I want to show you how to configure and to use ui-select directive to add a paging behavior (NOTA: by default the ui-select directive have no paging functionality).

The first step is to add the ui-select dependency into your module definition, following the official documentation the ngSanitize is required too.

JavaScript

1

var app = angular.module('Paging-Functionalty-Demo', ['ngSanitize', 'ui.select']);

This is the controller definition (I put it here to help you to understand the complete structure)

JavaScript

1

app.controller('DemoCtrl', function ($scope) {

2

  var ctr = this;

3

  ctr.itemSelected = undefined;

4

  ctr.list = [ 

5

    {text: 'First Item',valid:true},

6

    {text: 'Second Item',valid:true},

7

    {text: 'Third Item',valid:true},

8

    {text: 'Fourth Item',valid:true},

9

    {text: 'Last Item',valid:true}

10

  ];

11

});

NOTE: the valid property will be used to identify when the item is a real option or the item for the paging option.

#tutorial #web dev #angularjs #paging and searching #ui-select