Search code examples
angularjsng-optionsangularjs-select

equating variables which are coming from http calls

I have a select tag with options populated by AngularJS. I am trying to select an option if it equals to another property in scope. Option values and scope property I am trying to compare are both coming from async http call. So there is always delay, then it is not working properly. What is the best practice to make sure that both scope property are resolved and ready to compare.

ng-selected="MusteriId == option.Value" is comparing part.

<select id="MusteriId" name="MusteriId" ng-model="MusteriId">
    <option ng-selected="MusteriId == option.Value"
            ng-repeat="option in MusteriList" value="{{option.Value}}">
      {{option.Text}}
    </option>
</select>

This is my controller where two http calls are performed.

(function() {
var biletController = function ($scope, $http, commonFunctions) {

    $scope.Id = null;
    $scope.BiletNo = null;
    $scope.BiletTarihi = null;
    $scope.CurrencyId = null;
    $scope.MusteriId = null;
    $scope.PAID_EUR = null;
    $scope.PAID_TL = null;
    $scope.PAID_USD = null;
    $scope.ServisIstiyorMu = null;
    $scope.TOTAL = null;
    $scope.TourId = null;

    $scope.MusteriList = null;

    $scope.openEditFormJS = function(e) {
        $http.get('/Bilet/Get/' + e)
            .then(function (response) {

                console.log(response.data);

                $scope.Id = response.data.Id;
                $scope.BiletNo = response.data.BiletNo;

                if (response.data.BiletTarihi) {
                    $scope.BiletTarihi = commonFunctions.formatDate(new Date(parseInt(response.data.BiletTarihi.substr(6))));
                }

                $scope.CurrencyId = response.data.CurrencyId;
                $scope.MusteriId = response.data.MusteriId;
                $scope.PAID_EUR = response.data.PAID_EUR;
                $scope.PAID_TL = response.data.PAID_TL;
                $scope.PAID_USD = response.data.PAID_USD;
                $scope.ServisIstiyorMu = response.data.ServisIstiyorMu;
                $scope.TOTAL = response.data.TOTAL;
                $scope.TourId = response.data.TourId;

                $('#modal').modal('show');

            });

        $http.get('/Bilet/GetMusteriSelectList')
            .then(function (response) {

                console.log(response.data);
                $scope.MusteriList = response.data;
            });
    };

};

app.controller('BiletController', ['$scope', '$http', 'commonFunctions', biletController]);
}());
Solution

  • Use the ng-value directive for non-string values1

    <select id="MusteriId" name="MusteriId" ng-model="MusteriId">
    <option ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶M̶u̶s̶t̶e̶r̶i̶I̶d̶ ̶=̶=̶ ̶o̶p̶t̶i̶o̶n̶.̶V̶a̶l̶u̶e̶"̶
            ng-repeat="option in MusteriList" ng-value="option.Value">
      {{option.Text}}
    </option>
</select>

    For more information, see Using ngValue to bind the model to an array of objects

    Don't use ngSelected with ngModel2

    <select id="MusteriId" name="MusteriId" ng-model="MusteriId">
    <option ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶M̶u̶s̶t̶e̶r̶i̶I̶d̶ ̶=̶=̶ ̶o̶p̶t̶i̶o̶n̶.̶V̶a̶l̶u̶e̶"̶
            ng-repeat="option in MusteriList" value="{{option.Value}}">
      {{option.Text}}
    </option>
</select>

    From the Docs:

    Note: ngSelected does not interact with the <select> and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.

    — AngularJS ng-selected API Reference

    See additional Docs:

    See Stackoverflow: