Learn MVC Using Angular UI Select

Introduction

This article demonstrates how to create MVC applications using Angular UI-Select with bootstrap. This article is useful for implementing auto complete text in your application.

Angular UI Select

Angular UI-Select is used for customizing the select box or text, with the support for searching the user’s character or words in the bundle of data.

Features

• Search, single select / multi select, tagging
• Multiple themes: bootstrap, select 2
• It will work with keyboard search
• No jQuery required

Follow the steps to use Angular UI-Select in MVC

Create MVC Project

Open Visual Studio 2017.



Go to New menu and click New >> project. Now, it will open a "New Project" window.



You can select ASP.NET Web Application on Framework 4.5. Enter the name of project in “Solution name” textbox and click OK.



One more window should appear. Select MVC Template in this popup & click OK.

Configure Angular UI Select

You can download the plug in from Angular UI Select or install it using NPM. 

$ npm install ui-select

Open the _Layout.cshtml and refer the .js file from downloaded folder to this View page.

<script src="~/Plugin/angular/angular.min.js"></script>
        <script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="~/Plugin/angular-ui-select/dist/select.js"></script>
       <link href="~/Plugin/angular-ui-select/dist/select.css" rel="stylesheet" />

Link your Angular configurable file here.

<script src="~/App/App.module.js"></script>
    <script src="~/App/App.config.js"></script>
       <script src="~/App/uiSelectController.js"></script>

Angular Module

Now, you need to include the module as a dependency on your application.

var uiroute = angular
    .module('uiroute', ['ui.router','ui.select']);

If you have any doubt in configuration, visit the following of my articles,

• Learn Basics Of MVC Using AngularJS
• Learn MVC Using Angular UI-Route
• Learn MVC Using Angular Role Based Login
• Learn MVC Using Angular Datatable
• Learn MVC Using Angular Crystal Report
• Learn MVC Using Angular Pie Chart
• Learn MVC Using Angular Flot Chart
• Learn MVC Using Angular xEditable
• Learn MVC Using Angular Idle
• Learn MVC Using Angular Wizard
• Learn MVC Using Angular - Maps

Working with Angular UI Select

With Angular UI-Select, you can use some different methods.

• Array of single select
• Array of string
• Array of objects
• Array of object with single property binding
• Array of object with group by

Array of single select

It will allow you for single values and loaded as name, email & age. Here I will use bootstrap themes.

Html Code

<ui-select ng-model="person.selected" theme="bootstrap" >
                        <ui-select-match placeholder="Select or search a name/age...">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
                            <div ng-bind-html="person.name | highlight: $select.search"></div>
                            <small>
                                email: {{person.email}} age:
                                <span ng-bind-html="''+person.age | highlight: $select.search"></span>
                            </small>
                        </ui-select-choices>
                    </ui-select>

Angular Controller

$scope.person = {};
        $scope.people = [
            { name: 'Samantha', email: '[email protected]', age: 31 },
            { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
            { name: 'Natasha', email: '[email protected]', age: 54 },
            { name: 'Nicole', email: '[email protected]', age: 43 },
            { name: 'Adrian', email: '[email protected]', age: 21 }
        ];

Array of string

You can select multiple results in this list & binding as color list. Model will getting array as string.

Html Code

<ui-select multiple="" ng-model="multipleDemo.colors" theme="bootstrap" >
                        <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
                        <ui-select-choices repeat="color in availableColors | filter:$select.search">{{color}}</ui-select-choices>
                    </ui-select>
<div class="text-sm text-muted mt-sm">Selected: {{multipleDemo.colors}}</div>

Angular Controller

$scope.availableColors = ['Red', 'Green', 'Blue', 'Yellow', 'Magenta', 'Maroon', 'Umbra', 'Turquoise'];
       $scope.multipleDemo = {};
       $scope.multipleDemo.colors = ['Blue', 'Red'];

Array of objects.

Html Code

<ui-select multiple="" ng-model="multipleDemo.selectedPeople" theme="bootstrap" >
                        <ui-select-match placeholder="Select person...">{{$item.name}} <{{$item.email}}></ui-select-match>
                        <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
                            <div ng-bind-html="person.name | highlight: $select.search"></div>
                            <small>
                                email: {{person.email}} age:
                                <span ng-bind-html="''+person.age | highlight: $select.search"></span>
                            </small>
                        </ui-select-choices>
                    </ui-select>
<div class="text-sm text-muted mt-sm">Selected: {{multipleDemo.selectedPeople}}</div>

Angular Controller

$scope.people = [
            { name: 'Samantha', email: '[email protected]', age: 31 },
            { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
            { name: 'Natasha', email: '[email protected]', age: 54 },
            { name: 'Nicole', email: '[email protected]', age: 43 },
            { name: 'Adrian', email: '[email protected]', age: 21 }
        ];

$scope.multipleDemo = {};
        $scope.multipleDemo.selectedPeople = [$scope.people[5], $scope.people[4]];

Array of object with single property binding

Html Code

  <ui-select multiple="" ng-model="multipleDemo.selectedPeopleSimple" theme="bootstrap" >
                        <ui-select-match placeholder="Select person...">{{$item.name}} <{{$item.email}}></ui-select-match>
                        <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
                            <div ng-bind-html="person.name | highlight: $select.search"></div>
                            <small>
                                email: {{person.email}} age:
                                <span ng-bind-html="''+person.age | highlight: $select.search"></span>
                            </small>
                        </ui-select-choices>
                    </ui-select>
<div class="text-sm text-muted mt-sm">Selected: {{multipleDemo.selectedPeopleSimple}}</div>

. Angular Controller

$scope.people = [
            { name: 'Samantha', email: '[email protected]', age: 31 },
            { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
            { name: 'Natasha', email: '[email protected]', age: 54 },
            { name: 'Nicole', email: '[email protected]', age: 43 },
            { name: 'Adrian', email: '[email protected]', age: 21 }

  $scope.multipleDemo.selectedPeopleSimple = ['[email protected]', '[email protected]'];

Array of object with group by

In there you must use group-by="someGroupFn" directives

Html Code

   <ui-select multiple="" ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" >
                        <ui-select-match placeholder="Select person...">{{$item.name}} <{{$item.email}}></ui-select-match>
                        <ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
                            <div ng-bind-html="person.name | highlight: $select.search"></div>
                            <small>
                                email: {{person.email}} age:
                                <span ng-bind-html="''+person.age | highlight: $select.search"></span>
                            </small>
                        </ui-select-choices>
                    </ui-select>
<div class="text-sm text-muted mt-sm">Selected: {{multipleDemo.selectedPeopleWithGroupBy}}</div>

.Angular Controller

$scope.people = [
            { name: 'Samantha', email: '[email protected]', age: 31 },
            { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
            { name: 'Natasha', email: '[email protected]', age: 54 },
            { name: 'Nicole', email: '[email protected]', age: 43 },
            { name: 'Adrian', email: '[email protected]', age: 21 }
        ];
$scope.someGroupFn = function (item) {

            if (item.name[0] >= 'A' && item.name[0] <= 'M')
                return 'From A - M';

            if (item.name[0] >= 'N' && item.name[0] <= 'Z')
                return 'From N - Z';

        };
$scope.multipleDemo.selectedPeopleWithGroupBy = [$scope.people[8], $scope.people[6]];
$scope.disabled = undefined;

        $scope.enable = function () {
            $scope.disabled = false;
        };

        $scope.disable = function () {

            $scope.disabled = true;
        };

        $scope.clear = function () {
            $scope.person.selected = undefined;
            $scope.address.selected = undefined;
            $scope.country.selected = undefined;
        };

Click play button on VS 2017,Run the Application. Now it will appear in the  browser & you can see the result

Output 1



Output 2



Conclusion

In this article, we have learned about MVC using angular UI select. If you have any queries, please tell me through the comments section, because your comments are very valuable.

Happy Coding!..