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" />

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

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

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

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

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

即便如此，即使我在屏幕上看到它们作为输入字段内的文本，我的POST请求也无法识别ng模型实际发生了变化的事实。 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请求发送到服务器。

关于为什么＆＃34;自动和动态生成＆＃34;的任何想法当用户键入值时，输入字段的值不会被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模型没有改变。解决方案包括将更改应用于动态生成的值函数内的每个元素的ng模型。感谢大家的投入。如果有人遇到同样的问题，我会把这段代码留在这里！再次感谢！

      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控件上的视图（input，select，textarea）。在你的generateFoodAndBeverages函数中，只需根据哪一行设置ng-model值，例如：

.to_blob

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

1 个答案: