I’m working on an AngularJS project where I’ve upgraded from ui-select2 to ui-select due to security concerns. However, I’ve run into a couple of issues with the ui-select dropdown:
Search Issue: The search functionality in the dropdown does not seem to work as expected. When I search for an item, the results are not displayed correctly, and the “No matches found” message is not showing as it should.
Here’s the relevant code:
Html :
<div class="col-sm-3">
<!--<select name="procurementMode" ui-select2="dropDown" ng-model="templateId" data-placeholder="Select Email Template" class="col-sm-10">
<option></option>
<option ng-repeat="t in etemplates" value="{{t.Id}}">{{t.Name}}</option>
</select>-->
<ui-select ng-model="templateId.Id" theme="select2" class="col-sm-10" style="width: 100% !important;" convert-to-string stringify-value="true">
<ui-select-match allow-clear="true" placeholder="Select Email Template">{{$select.selected.Name}}</ui-select-match>
<ui-select-choices refresh-delay="500" repeat="t.Id | valueToString as t in etemplates | filter:$select.search">
{{t.Name}}
</ui-select-choices>
<div ui-select-no-choice class="no-match-message">No matches found</div>
</ui-select>
</div>
JS :
(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.templateId = {Id:null};
$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.getEmailTemplates();
}
$scope.init();
//Send Email
$scope.sendEmail = function () {
$rootScope.viewLoading = true;
if (!isValidObject($scope.templateId.Id )) {
alertify.error("Please Select Email Template");
$rootScope.viewLoading = false;
return;
}
var selectedRows = getSelectedIdsFromList($scope.gridConfig.getSelectedItems());
var ids = "";
if (!$scope.isSelectAll) {
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();
// }
}
}
}
$scope.sendEmailData = JSON.stringify({
templateId: $scope.templateId.Id,
employeids: ids,
isSelectAll: $scope.isSelectAll,
emailManager: $scope.search
});
ajaxCall.post('/ETT/EmailManager/SendEmail', $scope.sendEmailData)
.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);
What I Have Tried:
- Checked the ui-select documentation to ensure proper configuration.
- Verified that etemplates contains the expected data.
- Confirmed that templateId.Id is correctly bound to the ng-model.
Observed that during search, the dropdown displays incorrect data and the “No matches found” message does not appear as expected.
Expected Behavior:
- The search input should correctly filter and display matching results in the dropdown.
- The “No matches found” message should be displayed when no results match the search query.