控制器 ng-model 数据与视图上的 ng-model 数据不同

Question

我在使用绑定到控制器中的选择框的数据时遇到问题。当我使用绑定到的 ng-model 变量在视图上显示所选数据时，一切正常。现在，当我尝试在函数中的控制器中使用这些相同的值而不是给我选择的值时，它给了我选择中的第一个值。

我尝试了我所知道的一切来修复它，但无法解决...任何帮助将不胜感激。我想我错过了一些行为。

使用 ng-click 按钮调用 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-model 设置为与您尝试将其设置为相同的属性，则此 可能 工作，但您不会真正提交它，您只会使用现有的绑定功能，例如：

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