当模型由另一个进程

时间:2016-03-28 17:35:37

标签: javascript angularjs

我有一个select列表,该列表由填充数组vendors的API填充。

<select ng-model="po.vendor" ng-options="vendor as vendor.VendorName for vendor in vendors"></select>
然后通过下游的API过程更新

po.vendor。我的问题是下拉列表没有更新以反映更改。

控制器:

//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>输出的图片。

2 个答案:

答案 0 :(得分:4)

我认为vendor中的po对象与vendors数组中的对象引用不同。我不相信ngOptions使用对象等价逻辑。解决问题的一种方法可能是从vendor数组中找到匹配的vendors并将其附加到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; } 上,如下所示:

(请原谅任何盲编码错误)

/^[a-z][\w.-]{1,18}[\w-]$/i

答案 1 :(得分:0)

问题是,当您使用新的po对象覆盖$scope时,您正在从data监视器中断开连接。您要做的是将其所有属性更改为新值,以便在下一个摘要循环期间在视图中更新它们。为此,请替换以下内容:

$scope.po = data;

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

或者,如果您需要深层复制

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