0

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]);
}());
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Savas Karaduman
  • 107
  • 1
  • 8
  • To better understand the problem, I need to see an example of the `response.data` from both $http requests. – georgeawg May 05 '19 at 12:03

1 Answers1

0

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:

Community
  • 1
  • 1
georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • Thanks you, your solution works only if I convert MusteriId result from http response to String. Do you have any suggestion if I can implement something that http results to be converted to string automatically. This is what I used> $scope.MusteriId = String(response.data.MusteriId); – Savas Karaduman May 05 '19 at 11:46
  • Did you use `value="{{option.Value}}"` or `ng-value="option.Value"`? – georgeawg May 05 '19 at 12:05
  • I used ng-value="option.Value" as you advised. It is working fine but it is sensitive to Data Type, string or number. I should use conversion to String to make it work and it makes sense. – Savas Karaduman May 05 '19 at 12:44
  • The ` – georgeawg May 05 '19 at 13:42