Learn MVC Using Angular UI Select11 min read

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 an MVC Project

Open Visual Studio 2017.

MVC

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

MVC

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

MVC

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

Configure Angular UI Select

You can download the plugin 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.

Link your Angular configurable file here.

Angular Module

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

Working With Angular UI Select

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

  • An array of single select.
  • An array of strings.
  • An array of objects.
  • An array of objects with single property binding.
  • An array of objects with ‘group by.’

Array of Single Select

It will allow you to enter single values, such as names, email addresses, and age. Here I will use Bootstrap themes.

HTML Code

Angular Controller

Array of Strings

You can select multiple results in this list and bind them as a color list. The model will take an array as a string.

HTML Code

Angular Controller

Array of Objects

HTML Code

Angular Controller

Array of Object With Single Property Binding

HTML Code

Angular Controller

Array of Object With ‘Group By’

Here, you must use the directive group-by="someGroupFn".

HTML Code

Angular Controller

Click the play button on VS 2017, and run the application. Now it will appear in the browser and you can see the results.

Output 1

MVC

Output 2

MVC

Conclusion

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

Happy Coding!

Author Profile

Thiruppathi Rengasamy
I 'm a .Net Developer & Blogger. And also I'm working as senior software engineer in Microsoft Technologies for 5+ Years.I would like to spend my precious time in writing articles, research in .Net technologies and to learn new technologies.

Hits: 42