控制器ng-model數據與視圖上的ng-model數據不同

Question

我在使用綁定到控制器中的選擇框的數據時遇到問題。當我使用ng-model變量在視圖上顯示選定的數據時，它是綁定的，一切正常。現在，當我嘗試在控制器中使用這些相同的值而不是給我選定的值時，它會給我選擇中的第一個值。

我嘗試了一切，我知道修復它，但無法弄清楚...任何幫助將不勝感激。我想我錯過了一些行爲。

使用ng鍵單擊按鈕調用addProduct方法。顯示的數據是點擊按鈕填充數據後的結果。

代碼選擇框：

<div class="row select-options-container"> 
    <div class="col"> 
     <select class="product-options-select" ng-model="sizeOption" ng-options="o as o.size for o in selectOptions" data-ng-change="getIntensityOptions(sizeOption.id)"> 
     </select> 
    </div> 

    <div class="col"> 
     <select class="product-options-select" ng-model="intensityOption" ng-options="o for o in intensityOptions"> 
     </select> 
    </div> 
</div> 

查看什麼，我下面顯示：

<b>CONTROLLER VALUES</b> 
<p><b>Size:</b> {{ newSize }}</p> 
<p><b>Intensity:</b> {{ newIntensity }}</p> 
<p><b>QTY:</b> {{ newQty }}</p> 

<b>VIEW VALUES</b> 
<p><b>Size:</b> {{ sizeOption.size }}</p> 
<p><b>Intensity:</b> {{ intensityOption }}</p> 
<p><b>QTY:</b> {{ productQty }}</p> 

控制器代碼爲我顯示如下：

$scope.addProduct = function() { 
    $scope.newIntensity = $scope.intensityOption; 
    $scope.newSize = $scope.sizeOption.size; 
    $scope.newQty = $scope.productQty; 
} 

PS - 所有這些額外的代碼都只是用來說明問題。

Answer 1

從您的代碼，它看起來不像你正在更新正確提交的值。

備註：如果我誤解了你的目標，請發表評論，我會再次評論。

這個可能工作，如果你要設置表單元素ng模型是你想要設置它相同的屬性，但那麼你不會真的提交它，你只會使用存在的綁定功能，下面的例子：

<select class="product-options-select" ng-model="newIntensity" ng-options="o for o in intensityOptions"> 
</select> 

我推薦的解決方案卻是這樣的，以允許適當的「提交」行動，從頁面上移動數據到控制器：

HTML

<div class="row select-options-container"> 
    <div class="col"> 
     <select class="product-options-select" ng-model="formData.sizeOption" ng-options="o as o.size for o in selectOptions" data-ng-change="getIntensityOptions(formData.sizeOption.id)"> 
     </select> 
    </div> 

    <div class="col"> 
     <select class="product-options-select" ng-model="formData.intensityOption" ng-options="o for o in intensityOptions"> 
     </select> 
    </div> 
</div> 

<!-- assuming you have a submit button of some sort --> 
<button ng-click="addProduct(formData)">Add Product</button> 

JS

$scope.addProduct = function(formData) { 
    $scope.newIntensity = formData.intensityOption; 
    $scope.newSize = formData.sizeOption.size; 
    $scope.newQty = formData.productQty; // I don't know where this comes from, in the HTML the ng-model should be formData.productQty 
}