I am working on an AngularJS project and have upgraded the library from ui-select2 to ui-select. I am specifically working on a dropdown, so I had the ui-select2 dropdown:
<select data-ui-select2="{allowClear: true}" ui-select2="clearDropDown" ng-model="isFinalSubmission" data-placeholder="Final Submission Done?" class="padding-left-right-zero">
<option></option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
I have now upgraded to ui-select dropdown:
<ui-select style="cursor: pointer;" ng-model="isFinalSubmission" theme="select2"
class="padding-left-right-zero" search-enabled="true"
ng-init="options = [{ value: 'true', label: 'Yes' },{ value: 'false' , label: 'No' }]">
<ui-select-match allow-clear="true" placeholder="Final Submission Done?">{{$select.selected.label}}</ui-select-match>
<ui-select-choices repeat="option.value as option in options | filter: $select.search">
{{option.label}}
</ui-select-choices>
</ui-select>
However, it is not working as expected. The dropdown value is displayed correctly when I click it, but when I perform an operation, the value sent to the backend is always the initial fixed value, which is not what I want.
Js File:
(function (window, angular, undefined) {
'use strict';
angular.module('angularModule.controllers').controller('searchHoldingCtrl', ['$scope', '$compile', '$window', 'ajaxCall', '$controller', 'checkPermissions', '$rootScope', '$location', 'permissionCheckService', 'fileDownloadService', 'holdingColumns','$timeout', function ($scope, $compile, $window, ajaxCall, $controller, checkPermissions, $rootScope, $location, permissionCheckService, fileDownloadService, holdingColumns, $timeout) {
permissionCheckService.check('ETT_Reports_View');
//Injecting common useful values to the scope
$controller('commonCtrl', { $scope: $scope });
$scope.selectIsinList();
$scope.searchIsin = { Id: null };
$scope.selectOptionsEmployeePromise();
$scope.searchEmployee = { Id: null };
$scope.searchTimePeriod = {}
$scope.searchClass = {}
$scope.searchParentCompany = {};
$scope.copyHoldingToOpening = {};
$scope.searchTimePeriodType = {};
$scope.isFinalSubmission = true;
$scope.isTimePeriodShow = false;
$scope.isHoldingdateShow = false;
$scope.ExportAnnualHoldingPDFReport = function () {
var url = "/ETT/Reports/ExportAnnualHoldingPDFReport";
var emp = isValidObject($scope.searchEmployee) ? $scope.searchEmployee.Id : null;
var time = isValidObject($scope.searchTimePeriod) ? $scope.searchTimePeriod.Id : null;
var holdingDate = isValidObject($scope.model.searchHoldingDate) ? $scope.model.searchHoldingDate : "";
var timePeriodTypeId = isValidObject($scope.searchTimePeriodType) ? $scope.searchTimePeriodType.Id : null;
var isin = isValidObject($scope.searchIsin) ? $scope.searchIsin.Id : null;
var classId = isValidObject($scope.searchClass) ? $scope.searchClass.Id : null;
var parentCompanyId = isValidObject($scope.searchParentCompany) ? $scope.searchParentCompany.Id : null;
var isFinalSubmission = isValidObject($scope.isFinalSubmission) ? $scope.isFinalSubmission : null;
$rootScope.viewLoading = true;
fileDownloadService.downloadFilePost(url, JSON.stringify({
emp: emp,
timePeriod: time,
holdingDate: holdingDate,
timePeriodTypeId: timePeriodTypeId,
isin: isin,
classId: classId,
parentCompanyId: parentCompanyId,
isFinalSubmission: isFinalSubmission
})).then(function (data) {
if (!angular.isUndefined(data) && data.IsError == true) {
alertify.error(data.Message);
$rootScope.viewLoading = false;
return;
}
else {
$rootScope.viewLoading = false;
}
});
}
//Search
$scope.gridconfig.getData = function (e) {
$scope.gridconfig.isLocalData = true;
$scope.model.RowsPerPage = $scope.reset ? 20 : e.data.pageSize;
$scope.model.PageNumber = $scope.reset ? 1 : e.data.page;
var emp = $scope.searchEmployee == undefined ? null : $scope.searchEmployee.Id;
var time = $scope.searchTimePeriod == undefined ? null : $scope.searchTimePeriod.Id;
var holdingDate = $scope.model.searchHoldingDate == undefined ? "" : $scope.model.searchHoldingDate;
var timePeriodTypeId = $scope.searchTimePeriodType == undefined ? null : $scope.searchTimePeriodType.Id;
var isin = $scope.searchIsin == undefined ? null : $scope.searchIsin.Id;
var classId = $scope.searchClass == undefined ? null : $scope.searchClass.Id;
var parentCompanyId = $scope.searchParentCompany == undefined ? null : $scope.searchParentCompany.Id;
var isFinalSubmission = $scope.isFinalSubmission == undefined ? null : $scope.isFinalSubmission;
$rootScope.viewLoading = true;
ajaxCall.get('/ETT/Reports/SearchHoldings?emp=' + emp + '&timePeriod=' + time + '&holdingDate=' + holdingDate + '&timePeriodTypeId=' + timePeriodTypeId + '&isin=' + isin + '&classId=' + classId +
'&parentCompanyId=' + parentCompanyId + '&isFinalSubmission=' + isFinalSubmission).then(function (data) {
if (angular.isUndefined(data) && data == null) {
$scope.holdingDataSource = [];
return;
}
if (!data.IsError) {
$scope.holdingDataSource = data.SearchResults;
$scope.gridconfig.ds = getRecordsForPage($scope.holdingDataSource, $scope.model.PageNumber, $scope.model.RowsPerPage);
$scope.gridconfig.dataCount = $scope.holdingDataSource.length;
e.success({ data: $scope.gridconfig.ds, total: $scope.gridconfig.dataCount });
$rootScope.viewLoading = false;
}
else {
alertify.error(data.Message)
$rootScope.viewLoading = false;
}
});
};
}]);
})(window, window.angular);
What I Have Tried:
- Checked the ui-select documentation to ensure proper configuration.
- Verified that isFinalSubmission contains the expected data.
Issue:
It shows “true” in the backend even when “No” is selected.
Expected Behavior:
The dropdown should correctly reflect the selected option and send the appropriate value to the backend.
