javascript - 当模型被另一个进程更新时，选择下拉列表不更新

Question

我有一个 select由填充数组 vendors 的 API 填充的列表.

<select ng-model="po.vendor" ng-options="vendor as vendor.VendorName for vendor in vendors"></select>

po.vendor然后通过下游的 API 流程进行更新。我的问题是下拉列表没有更新以反射(reflect)更改。

Controller :

//fill the array so we can populate our dropdown list
$scope.vendors = $scope.vendors || [];
if ($scope.vendors.length < 1) loadExistingVendors();

//load some purchase order by id
getPurchaseOrderById(1);

function getPurchaseOrderById(purchaseOrderId) {
    apiService.getPurchaseOrderById(purchaseOrderId).then(function (data) {
        //apply po to the model
        applyPurchaseOrderModel(data);
    }, function (error) {
        //blah
    });
}

function applyPurchaseOrderModel(data) {
    //need to convert c# date to json data
    var regex = /-?\d+/;
    var match = regex.exec(data.dateRequested);
    var date = new Date(parseInt(match[0]));
    data.dateRequested = date;

    //set the po object to data, data.vendor contains selected vendor info
    $scope.po = data;
}

根据我的<pre></pre>模型 ( po.vendor ) 和数组 ( vendors ) 的输出，我确实看到它们匹配。但是 select 元素没有更新以反射(reflect)这一点。为什么？

<h3>po.vendor</h3>
<pre>{{po.vendor | json}}</pre>
<h3>vendors array at the 6 position</h3>
<pre>{{vendors[6] | json}}</pre>

Click here <pre> 的图像输出。

Answer 1

我认为 po 中的 vendor 对象与 vendors 数组中的对象引用不同。我不相信 ngOptions 使用对象等价逻辑。修复它的一种方法可能是从 vendors 数组中找到匹配的 vendor 并将其附加到 po 的位置，就像这样:

(如有盲目编码错误请见谅)

function applyPurchaseOrderModel(data) {
    //need to convert c# date to json data
    var regex = /-?\d+/;
    var match = regex.exec(data.dateRequested);
    var date = new Date(parseInt(match[0]));
    data.dateRequested = date;

    //The fix
    for (var i=0; i<vendors.length; i++) {
        if (angular.equals(vendors[i], data.vendor)) {
            vendors[i] = data.vendor;
            break;
        }
    }

    //set the po object to data, data.vendor contains selected vendor info
    $scope.po = data;
}