當模型被另一個進程更新時，選擇下拉列表不會更新

Question

我有一個由填充數組vendors的API填充的select列表。

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

po.vendor然後通過其下游的API過程更新。我的問題是，下拉列表不會更新以反映更改。

控制器：

//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元素沒有更新以反映這一點。爲什麼？

<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

我覺得vendor對象在po是不一樣的對象引用位於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; 
} 

Answer 2

問題是，當您用新的data對象覆蓋它時，將從$scope手錶斷開po的連接。您想要執行的操作是將其所有屬性更改爲新值，以便在下一個摘要循環中可以在視圖中更新它們。要做到這一點，替換以下：

$scope.po = data; 

與

angular.extend($scope.po, data); 

，或者，如果你需要一個深拷貝

angular.merge($scope.po, data);