Abhishek Sharma
Abhishek Sharma

Reputation: 31

ui-select Dropdown Always Sends 'true' to Backend Regardless of Selection

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>

<div class="col-sm-5">
   <br />
   <button type="button" class="btn btn-sm btn-primary pull-right" style="border-radius:5px" ng-d ng-click="loadGrid()">Search</button>
</div>

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.loadGrid();
 $scope.loadGrid = function (reset) {
            $scope.reset = reset ? true : false;
            $scope.isGridIsShown = true;
            $scope.gridconfig.isLocalData = false;
            $timeout(function () {
                $scope.$broadcast('LoadKendoGridEvent')
            })
        };
 $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:

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.

Upvotes: 0

Views: 40

Answers (0)

Related Questions