Here, we explore on below controls.
Search box with AutoComplete
Date & Time controls
Modal Popup
Please follow my previous article (SPA in MVC5 using angular) for setting up the
MVC 5 project using angular.
http://nullskull.com/a/10479043/spa-single-page-application-in-mvc-5-and-angularjs.aspx
Follow the below link for basic understanding of ui bootstrap controls
https://angular-ui.github.io/bootstrap
Date Control:
As we have Date control in HTML5 and bootstrap and is not compatible with most of
the browsers. Let’s create a Custom Date control directive in angular.
Add the jQuery Ui plugin from nugget and reference them in script and style bundle
as below.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/jquery-ui.css"));
bundles.Add(new ScriptBundle("~/bundles/angularspa").Include(
"~/Scripts/jquery-ui.js"));
Create a custom date directive in your angular module as below.
var app = angular.module('angularspa', ["ngRoute"]);
app.directive("customdatepicker", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, elem, attrs, ngModelCtrl) {
var updateModel = function (dateText) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateText);
});
};
var options = {
dateFormat: "mm/dd/yy",
onSelect: function (dateText) {
updateModel(dateText);
}
};
elem.datepicker(options);
}
}
});
Just add this directive in your text box with angular binding property ng-model to
set/get the date.
<input type="text" customdatepicker class="form-control pull-left" id="enddatetime" placeholder="mm/dd/yyyy" ng-model="testDate">
Time Control:
Add Angular UI Bootstrap nugget package and reference in script bundle
bundles.Add(new ScriptBundle("~/bundles/angularspa").Include(
"~/Scripts/angular-ui/ui-bootstrap-tpls.js""));
Define the ui bootstrap directive in angular module.
var app = angular.module('angularspa', ["ngRoute", "ui.bootstrap"]);
Now, add the time control in html design as below
<uib-timepicker ng-model="endTime" hour-step="hstep" minute-step="mstep" show-meridian="true"></uib-timepicker>
From above, properties
Hour-step -> Number of hours to increase or decrease when using a button (default
1).
Minute-step -> Number of minutes to increase or decrease when using a button (default
1)
Show-meridian -> Whether to display 12H or 24H mode.
Search Control:
Create a function in controller to get the list of users based on the search parameter
$scope.getUsers = function (val) {
var webUrl = 'http://localhost:50858/api/test/GetUsersFilterByName?query=' + val;
return $http.post(webUrl)
.then(function (response) {
return response.data.map(function (item) {
return item;
});
});
};
From above, posting the search parameter to the API to get the list of users.
Use uib-typeahead to get the auto complete feature in the textbox
<input type="text" ng-model="asyncSelected" typeahead-on-select="onSelectedUser($item, $model, $label)" uib-typeahead="name for name in getUsers($viewValue)">
Here, uib-typeahead is a result set to display the users based on $viewValue ( value
of search input).
Typeahead-on-select is an event to get a selected user from the result set.
Modal:
Add $uibmodal directive to the angular controller as below.
app.controller('rootController', ["$scope", "$http", "$rootScope", "$uibModal", function ($scope, $http, $rootScope, $uibModal)
use $uibModal.open method to open the modal popup with parameters.
$uibModal.open({
templateUrl: '/Home/MyModalContent',
controller: ModalInstanceCtrl,
backdrop: true,
keyboard: true,
backdropClick: true,
windowClass: 'center-modal',
resolve: {
data: function () {
return data;
}
}
});
templateUrl: is a html page that has to be opened as a modal popup.
Controller: is a angular controller that has to be associated with modal view
backdrop: to set the backdrop with opacity
windowClass: is to centre align the popup
resolve: pass data to view if required
In this example, I am creating the modal popup to display the message as Alert
<div class="modal-body" style="padding:0px">
<div class="alert alert-{{data.mode}}" style="margin-bottom:0px">
<button type="button" class="close" data-ng-click="close()">
<span class="glyphicon glyphicon-remove-circle"></span>
</button>
<strong>{{data.boldTextTitle}}</strong> {{data.textAlert}}
</div>
</div>
Data object from angular controller to set the message ant Title.
$scope.data = {
boldTextTitle: "Done",
textAlert: "Announcement published successfully",
mode: 'success'
}
windowClass style to centre the popup
.center-modal {
position: fixed;
top: 35%;
left: 18.5%;
z-index: 1050;
width: 80%;
height: 80%;
margin-left: -10%;
}
Download the sample from below location. Removed the packages from project solution
due to the size constraint, please refresh the packages before compiling
http://nullskull.com/FileUpload/-407123783_AngularSpa.zip