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

Posted 2023-02-26

【中文标题】控制器 ng-model 数据与视图上的 ng-model 数据不同

【英文标题】：Controller ng-model data different from ng-model data on the view

【发布时间】：2016-05-27 19:23:45

【问题描述】：

我在使用绑定到控制器中的选择框的数据时遇到问题。当我使用绑定到的 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 - 所有这些额外的代码都只是用来说明问题。

【问题讨论】：

每当您的模型值发生变化时，您需要调用 addProduct 方法重新初始化您的“视图”值

应该澄清一下......这些值都是在 ng-click 按钮上调用的。

【参考方案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 

【讨论】：

我会在大约一个小时后测试它，我不在我的笔记本电脑旁。但我确实尝试使用 addProduct(intensityOption, sizeOption) 提交它，但它仍然会提交第一个值