$scope.myObjectVariable 值设置为输入属性值

Question

晚上好，

我正在使用 AngularJS 编写应用程序，我需要应用程序通过 POST 请求向 nodejs 服务器发送数据。

我的数据结构类似于 json 对象，并且由于 AngularJS 框架而具有数据绑定。

截至目前，一个函数正在动态地尝试在某些input 标记中创建用户可能喜欢的可能值。一个例子：

<button ng-click="generateFoodAndBeverages(row)>Generate</button>
<input type="text" ng-model="row.service.day.beverage" placeholder="beverage" />
<input type="text" ng-model="row.service.day.food" placeholder="food" />

用户可以通过输入他们想要的值来设置两个输入值（例如“Cola”、“Hamburger”），但输入标签上方是一个可以生成的按钮用户的输入值。

生成值的函数从数组中获取它们，然后在函数末尾返回两个可能的值，一个用于饮料，一个用于食物。

当它有两个返回值时，它会更改两个输入的属性值，将它们设置为函数生成的两种可能性：

jQuery("#input1").attr("value", generateFoodAndBeverages(row)[0]);
jQuery("#input2").attr("value", generateFoodAndBeverages(row)[1]);

这既不完美也不优雅，但它确实有效。每次用户请求自动生成食物和饮料时，该函数都会填充并动态更改这两个输入元素的 value 属性，以便实际设置并确实存在这些值。

即便如此，即使我在屏幕上看到它们作为输入字段中的文本，我的 POST 请求也无法识别 ng-model 实际更改的事实。 ng-model 将更改注册到输入字段的 value 属性的唯一方法是，如果用户使用键盘键入内容，手动更改 value 属性。另一个例子：

<input type="text" value="generateValue()" ng-model="row.service.info" />

上面的那个根本不会改变 ng-model 的值。

<input type="text" value="User Typed Value" ng-model="row.service.info" />

这另一个确实改变了 ng-model 的值，并且随着它的改变和存在，它被传递到 $scope，稍后可以作为 POST 请求发送到服务器。

关于为什么输入字段的“自动和动态生成”的值没有被 ng-model 注册，而用户键入的值却注册了？

提前致谢！

[编辑]

显然问题在于ng-model 没有改变。我尝试通过在输入中应用ng-change 来调试问题。如果更改是由 javascript 完成的，它没有注册到 ng-model 并且 ng-change 函数不会触发，因为即使 ng-model 没有更改，我也可以清楚地看到 javascript 为输入设置的新值标签。如果我手动更改输入标签的值，ng-change 会被触发并且控制台会记录更改。

我可以将更改直接应用到ng-model，如果每一行的差别不大的话。

拥有这样的 ng 模型：

<input ng-model="row.serviceInfo.DayObject[dayString].food" />
<input ng-model="row.serviceInfo.DayObject[dayString].beverage" />

鉴于模型的动态性，我如何能够将更改直接应用于 ng-model。例如，我可以有 1000 行，每行都有自己的 serviceInfo 对象。我不知道如何使用动态生成的值更改每一行的模型。

[编辑]

问题确实在于 ng-model 没有改变。该解决方案包括将更改应用于动态生成的值函数内的每个元素的 ng-model。感谢大家的投入。如果有人遇到同样的问题，我会把这段代码留在这里！再次感谢！

      let foodEl = angular.element(the row element food input);
      let beverageEl = angular.element(the row element beverage input);

      $scope.displayedCollection[i].serviceInfo = {
        "day" : {
          "food" : generatedValuesFood(el, day),
          "beverage" : generatedValuesBeverage(el, day)
        }
      };

      foodEl.val($scope.displayedCollection[i].serviceInfo.day.food);
      beverageEl.val($scope.displayedCollection[i].serviceInfo.day.beverage);

Answer 1

我认为你的问题很简单。正如@ssougnez 所说，不要将 jquery 与 angularjs 混合。 Angularjs 使用数据绑定概念，不要使用 jquery 样式来更改输入值，而是使用 ng-model 指令将数据从模型绑定到 HTML 控件（输入、选择、文本区域）上的视图。在您的 generateFoodAndBeverages 函数中，只需根据哪一行设置 ng-model 值，例如：

var generateFoodAndBeverages = function () {
     $scope.row.service.day.beverage = array[0];
     $scope.row.service.day.food = array[1];
};