Improving ui-select Control

The idea of this post is to show you an aproach to how add a paging feature to ui-select directive. it's not the only way to implement.

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

Creative Sign Up UI Page Design in Adobe XD - Latest UI Design Tutorial

Flutter Login & Signup UI Speed Code Tutorial Video. UI Source Code Link : https://github.com/praveenguru/login_page Thanks for Watching :) Make sure to like...

In this Video i'm going to show how to create Complex UI's By Using Paging, Carousel List, Page Control, Custom Segmented Control, Custom Stacks Controls In ...

Flutter Login Page UI Speed Coding Tutorial Video. Thanks for Watching:) Make sure to like + Subscribe For More and also don't forget to comment your thought...

UI Online Course at OnlineITGuru with 7 years of hands on exp. trainer,Job oriented UI online training with live project in USA,UK,INDIA