如何使用 Javascript 将数据输入到 AngularJS 表单中？答案

【问题标题】：How to input data into AngularJS forms using Javascript?如何使用 Javascript 将数据输入到 AngularJS 表单中？
【发布时间】：2018-01-25 18:05:16
【问题描述】：

这个问题下面给出了angularJS形式。我想要做的是使用 JavaScript 将 #quantity 输入的值从 1 更改为 200，然后单击购买按钮。但是在我通过单击“购买”按钮提交表单后，#quantity 输入的值返回到其默认值 1。我尝试了以下代码来更改 #quantity input 元素的值：

var qty = document.getElementById('quantity');
var buy = document.querySelector('button.btn.place');
qty.value = "123";  
qty.select();
buy.click();`

但它不起作用。它总是拒绝该值。抱歉，我对 AngluarJS 没有任何了解，而且学习 AngularJS 需要很长时间。

这是QTY输入元素的代码：

<input type="number" step="1" id="quantity" name="quantity" ng-model="options.quantity" class="input width-100 numeric ng-isolate-scope ng-valid-number ng-valid-checklotsize ng-dirty ng-valid-required ng-valid ng-valid-integer" min="1" checklotsize="1" integer="" esc-key="" esc-key-action="close()" ng-disabled="!uiConstraints.quantity" required="">

和购买按钮：

<button type="submit" class="btn place btn-blue" ng-class="options.transaction_type == 'BUY' ? 'btn-blue' : 'btn-orange'" ng-disabled="buysellform.$invalid || order_status === true">
<span class="spinner icon ng-hide" ng-show="order_status === true">
    <span class="icon icon-spinner animate-spin"></span>
</span>
<span class="icon ng-hide" ng-show="order_status !== true &amp;&amp; execution_type == 'MODIFY'">MODIFY</span>
<span class="icon ng-binding" ng-show="order_status !== true &amp;&amp; execution_type == 'PLACE'">BUY</span></button>

【问题讨论】：

不要修改 DOM。修改范围变量并让 Angular 更新 DOM。（所以在这种情况下，您只需更改 options.quantity 的值，Angular 就会为您更新表单字段。）
（Angular 的工作方式 very 与 jQuery 不同。它们不能很好地混合。如果你打算在 Angular 中做任何数量的工作，我强烈建议你工作你先通过一些教程和介绍，这并不容易边做边学。）
嗯，我认为你是对的。我需要先学习 Angular！
这个问题在这里解决了我的问题stackoverflow.com/questions/13743058/…

标签： javascript angularjs forms

【解决方案1】：

请试试这个

var model =  angular.element(document.getElementById('quantity')).data('$ngModelController')
model.$setViewValue('123')
document.querySelector('button.btn.place').click();

这是在javascript中改变角度模型的肮脏方式。

【讨论】：

我强烈建议避免直接在 Angular 的控制器中进行 dom 操作。仅在控制器中编写业务逻辑