等同于来自http调用的变量

Question

我有一个选择标记，其中的选项由AngularJS填充。我试图选择一个选项，如果它等于作用域中的另一个属性。我试图比较的选项值和范围属性均来自异步http调用。因此总会有延迟，然后它就无法正常工作。确保两个作用域属性都已解析并准备进行比较的最佳实践是什么。

ng-selected="MusteriId == option.Value"正在比较部分。

<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>

这是我的控制器，执行两个http调用。

(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]);
}());

Answer 1

对非字符串值使用ng-value指令 ¹

<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>

有关更多信息，请参见Using ngValue to bind the model to an array of objects

---

请勿将ngSelected与ngModel一起使用 ²

<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>

从文档中：

  

注意：ngSelected不与<select>和ngModel伪指令交互，它仅在元素上设置选定的属性。如果您在选择上使用ngModel，则您不应在选项上使用ngSelected ，因为ngModel将设置选择值和所选选项。      

— AngularJS ng-selected API Reference

查看其他文档：

• Using ng-repeat to generate select options
• Using select with ng-options and setting a default value

请参阅Stackoverflow：

• Using ng-repeat to generate select options (with Demo)

---