I am using AngularJS with ui-select to create a dropdown for selecting a holding time period. The dropdown populates correctly and displays the options, but after I perform a search action and select an option, the selected value is not displayed in the input field.
<div class="col-lg-6 col-sm-12 col-xs-12">
<div class="col-lg-4 col-xs-5">
<label class="control-label"><strong>Holding Time Period : </strong></label>
</div>
<div class="col-lg-4 col-xs-7">
<!--<select name="procurementMode" ui-select2="dropDown" ng-model="search.HoldingTimePeriodId" data-placeholder="Select Holding Time Period" title="Select Holding Time Period">
<option></option>
<option ng-repeat="t in holdingTimePeriods" value="{{t.Id}}">{{t.Display}}</option>
</select>-->
<ui-select name="procurementMode" ng-model="search.HoldingTimePeriodId" theme="select2" style="width: 100% !important;">
<ui-select-match allow-clear="true" placeholder="Select Holding Time Period" title="Select Holding Time Period">{{$select.selected.Display}}</ui-select-match>
<ui-select-choices refresh-delay="1" repeat="t.Id as t in holdingTimePeriods | filter:$select.search">
{{t.Display}}
</ui-select-choices>
</ui-select>
</div>
</div>
holdingTimePeriod.png
**JavaScript File : **
(function (window, angular, undefined) {
'use strict';
angular.module('angularModule.controllers').controller('searchempManagerCtrl', ['$scope', '$compile', '$window', 'ajaxCall', '$controller', 'checkPermissions', '$rootScope', 'permissionCheckService', 'emailManagerColumns', '$timeout', function ($scope, $compile, $window, ajaxCall, $controller, checkPermissions, $rootScope, permissionCheckService, emailManagerColumns, $timeout) {
permissionCheckService.check('Email_Manager_View');
//Injecting common useful values to the scope
$controller('commonCtrl', { $scope: $scope });
$scope.fromdate = "";
$scope.enable = false;
$scope.templateId = { Id: null };
$scope.search = { OpeningStockSubmitted: null, DisclosureSubmitted: null, AnnualHoldingSubmitted: null, HoldingTimePeriodId: null, QuarterlyIntimationSubmitted: null, CompanyId: null, ClassId: null };
$scope.search.AsOfDateString = moment(new Date()).format("DD/MM/YYYY");
$scope.search.RelievingDateAsOfString = moment(new Date()).format("DD/MM/YYYY");
$scope.search.JoiningDateFromString = moment().set({ 'year': 1901, 'month': 0, 'date': 1 }).format("DD/MM/YYYY");
$scope.search.JoiningDateToString = moment().format("DD/MM/YYYY");
$scope.dropDown = { allowClear: true }; //Clear BUtton for Drop Downs
$scope.selectedIdsCount = 0;
$scope.gridConfig = {};
$scope.gridConfig.gridId = "EmailManagerGrid";
$scope.gridConfig.columns = emailManagerColumns.columns;
$scope.gridConfig.schema = emailManagerColumns.schema;
$scope.gridConfig.isLocalData = false;
$scope.emailManagerModel = {};
function getSelectedIdsFromList(list) {
var selectedIds = [];
if (isValidObject(list)) {
for (var i = 0; i < list.length; i++) {
selectedIds.push(list[i].Id);
}
}
return selectedIds;
};
$scope.pagingEvent = function () {
$scope.gridConfig.isLocalData = false;
$("#" + $scope.gridConfig.gridId).data("kendoGrid").dataSource.read();
};
$scope.loadGrid = function (reset) {
$scope.reset = reset ? true : false;
$scope.isGridIsShown = true;
$scope.gridConfig.isLocalData = false;
$scope.selectedIdsCount = 0;
$timeout(function () {
$scope.$broadcast('LoadKendoGridEvent')
})
};
$scope.CheckBoxClickEvent = function () {
$scope.selectedIds = getSelectedIdsFromList($scope.gridConfig.getSelectedItems());
$rootScope.$broadcast('countChecked', { selectedIds: $scope.selectedIds, isBypass: true });
$scope.selectedIdsCount = $scope.selectedIds.length;
$timeout(angular.noop);
}
$scope.AdvancedFilter = function (flag) {
$scope.gridConfig.filterable = flag ? true : null;
$scope.loadGrid();
}
$scope.GroupBy = function (flag) {
$scope.gridConfig.groupable = flag ? true : null;
$scope.loadGrid();
}
$scope.gridConfig.getData = function (e) {
$scope.search.RowsPerPage = $scope.reset ? 20 : e.data.pageSize;
$scope.search.PageNumber = $scope.reset ? 1 : e.data.page;
if (!isValidObject($scope.search.AsOfDateString)) {
alertify.error("Please Select As Of Date");
return;
}
$scope.search.HoldingTimePeriodId = $scope.search.HoldingTimePeriodId ? $scope.search.HoldingTimePeriodId.toString() : null;
$scope.search.QuarterlyIntimationTimePeriodId = $scope.search.QuarterlyIntimationTimePeriodId ? $scope.search.QuarterlyIntimationTimePeriodId.toString() : null;
$scope.search.CompanyId = $scope.search.CompanyId ? $scope.search.CompanyId.toString() : null;
$scope.search.ClassId = $scope.search.ClassId ? $scope.search.ClassId.toString() : null;
//$scope.search.HoldingTimePeriodId = $scope.search.HoldingTimePeriodId.toString();
//$scope.search.QuarterlyIntimationTimePeriodId = $scope.search.QuarterlyIntimationTimePeriodId.toString();
//$scope.search.CompanyId = $scope.search.CompanyId.toString();
//$scope.search.ClassId = $scope.search.ClassId.toString();
$rootScope.viewLoading = true;
$scope.gridConfig.isLocalData = true;
ajaxCall.post('/ETT/EmailManager/SearchEmployees', JSON.stringify({ emailManager: $scope.search }), false).then(function (data) {
if (data.IsError) {
alertify.error(data.Message);
$rootScope.viewLoading = false;
return;
}
$scope.gridConfig.ds = $scope.formatData(data.SearchResults);
$scope.gridConfig.dataCount = data.Count;
$scope.count = data.Count;
e.success({ data: $scope.gridConfig.ds, total: $scope.gridConfig.dataCount });
$rootScope.viewLoading = false;
});
};
$scope.getHoldingTimePeriodList = function () {
ajaxCall.get('/TimePeriod/GetAllHoldingTimePeriods').then(function (data) {
if (!isValidObject(data)) {
return;
} else {
if (data.IsError) {
alertify.error(data.Message);
} else {
console.log('Holding Time Periods:', data.holdingTimePeriods);
$scope.holdingTimePeriods = data.holdingTimePeriods;
}
}
});
}
$scope.getYesNoAllOptionEnumList = function () {
ajaxCall.get('/ETT/EmailManager/GetYesNoAllOptionValue').then(function (data) {
if (!isValidObject(data)) {
return;
} else {
if (data.IsError) {
alertify.error(data.Message);
} else {
$scope.submittedOptions = data.yesNoAllOptionTypeEnumList;
}
}
});
}
//Get TimePeriod for Quaterly Intimation
$scope.getQuaterlyTimePeriodList = function () {
ajaxCall.get('/TimePeriod/GetAllIntimationTimePeriods').then(function (data) {
if (!isValidObject(data)) {
return;
} else {
if (data.IsError) {
alertify.error(data.Message);
} else {
$scope.quaterlyTimePeriods = data.intimationTimePeriods;
}
}
});
}
$scope.getCompanyList = function () {
ajaxCall.get('/ManageData/CompanyParentMaster/GetAllCompany').then(function (data) {
if (!isValidObject(data)) {
return;
} else {
if (data.IsError) {
alertify.error(data.Message);
} else {
$scope.companyList = data.company;
}
}
});
}
$scope.getClassList = function () {
ajaxCall.get('/ETT/EmployeeClass/GetAllEmployeeClass').then(function (data) {
if (!isValidObject(data)) {
return;
} else {
if (data.IsError) {
alertify.error(data.Message);
} else {
$scope.classList = data.List;
}
}
});
}
$scope.getEmailTemplates = function () {
ajaxCall.get('/ManageData/EmailTemplates/GetEttEmailTemplates').then(function (data) {
if (!isValidObject(data)) {
return;
} else {
if (data.IsError) {
alertify.error(data.Message);
} else {
$scope.etemplates = data.templates;
}
}
});
}
$scope.init = function () {
$scope.getCompanyList();
$scope.getClassList();
$scope.getQuaterlyTimePeriodList();
$scope.getHoldingTimePeriodList();
$scope.getEmailTemplates();
$scope.getYesNoAllOptionEnumList();
}
$scope.init();
//Format data for array type data filtering in iggrid... temporary
$scope.formatData = function (list) {
if (isValidObject(list) && list.length > 0) {
angular.forEach(list, function (value, key) {
value.ParentEmployee = value.ParentEmployee != null ? value.ParentEmployee.Name : null;
value.ParentIntermediary = value.ParentIntermediary != null ? value.ParentIntermediary.Name : null;
value.Designation = value.Designation != null ? value.Designation.Name : null;
value.ParentCompany = value.ParentCompany != null ? value.ParentCompany.Name : null;
value.Company = value.Company != null ? value.Company.Name : null;
value.Department = value.Department != null ? value.Department.Name : null;
});
}
return list;
}
$scope.exportAllRecords = function (isExportAll) {
$rootScope.viewLoading = true;
if (!isExportAll) {
getExportData_Kendo_GetFile(false, $scope.gridConfig.gridId, $scope.gridConfig.columns, undefined, undefined, undefined, true);
}
else {
xhr_DownloadFile('/ETT/EmailManager/ExportToExcel?asOfDate=' + $scope.search.AsOfDateString + '&joiningDateTo=' + $scope.search.JoiningDateToString + '&joiningDateFrom=' + $scope.search.JoiningDateFromString + '&relievingDateAsOf=' + $scope.search.RelievingDateAsOfString + '&excludeRelieved=' + $scope.search.ExcludeRelieved + '&openingStockSubmitted=' + $scope.search.OpeningStockSubmitted + '&disclosureSubmitted=' +
$scope.search.DisclosureSubmitted + '&annualHoldingSubmitted=' + $scope.search.AnnualHoldingSubmitted + '&holdingTimePeriodId=' + $scope.search.HoldingTimePeriodId.toString() + '&quarterlyIntimationSubmitted=' + $scope.search.QuarterlyIntimationSubmitted + '&quarterlyIntimationTimePeriodId=' + $scope.search.QuarterlyIntimationTimePeriodId.toString() + '&companyId=' + $scope.search.CompanyId.toString() + '&classId=' + $scope.search.ClassId.toString(), 'GET');
}
$rootScope.viewLoading = false;
}
//Send Email
$scope.sendEmail = function () {
$rootScope.viewLoading = true;
if (!isValidObject($scope.templateId )) {
alertify.error("Please Select Email Template");
$rootScope.viewLoading = false;
return;
}
var selectedRows = getSelectedIdsFromList($scope.gridConfig.getSelectedItems());
var ids = "";
if (!isValidObject(selectedRows)) {
alertify.error("Please select a record to send an email.");
$rootScope.viewLoading = false;
return;
}
if (selectedRows.length == 0) {
alertify.error("Please select a record to send an email.");
$rootScope.viewLoading = false;
return;
} else {
if (selectedRows.length > 0) {
// for (var i = 0; i < selectedRows.length; ++i) {
ids = selectedRows.join();
// }
}
}
ajaxCall.post('/ETT/EmailManager/SendEmail?templateId=' + $scope.templateId + '&employeids=' + ids)
.then(function (data) {
if (isValidObject(data)) {
if (!data.isError) {
$rootScope.viewLoading = false;
if (data.Message != "")
log(data.Message);
if (data.InvalidEmailMessage != "")
alertify.error(data.InvalidEmailMessage);
if (data.EmailNotFoundMessage != "")
alertify.error(data.EmailNotFoundMessage);
if (data.ToEmailNotFound != "")
alertify.error(data.ToEmailNotFound);
if (data.DateOfJoining != "")
alertify.error(data.DateOfJoining);
if (data.EmpClassNotFound != "")
log(data.EmpClassNotFound);
} else {
$rootScope.viewLoading = false;
alert(data.Message);
}
}
}, function (data) {
consoleLog("Error: " + data.statusText);
$rootScope.viewLoading = false;
});
}
}]);
})(window, window.angular);
Expected Behavior:
After selecting an option, the selected value should be displayed in the ui-select input field.
Actual Behavior:
The selected value is not displayed in the ui-select input field after selection.