使用 javascript 更改 AngularJS 输入文本值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31498629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change AngularJS input text value using javascript
提问by techdog
I'm trying to run javascript in a browser extension to automate a process of filling in a form on a website and then clicking a button -- the extension code can be simulated by typing javascript:code into the address bar.
我正在尝试在浏览器扩展程序中运行 javascript 以自动执行在网站上填写表单然后单击按钮的过程——可以通过在地址栏中键入 javascript:code 来模拟扩展程序代码。
The website that I'm having problems with uses angularJS. I have the names of the input field ids and am using those to change the input field values. The fields fill up but when I click the button it says they are not filled, there are no values and they are all in error. Some validation is going on that does not "see" my changes unless I type in the values manually.
我在使用时遇到问题的网站angularJS。我有输入字段 ID 的名称，并且正在使用这些名称来更改输入字段值。字段已填满，但是当我单击按钮时，它说它们没有填满，没有值，而且它们都是错误的。一些验证正在进行，除非我手动输入值，否则它不会“看到”我的更改。
Is there a simple way to change the value of the AngularJS input fields that have validation using just the id of the input field.
有没有一种简单的方法来更改仅使用输入字段的 id 进行验证的 AngularJS 输入字段的值。
Here is the code:
这是代码：
<input id="shippingAddr-first-name" type="text" class="first-name ng-pristine ng-valid" maxlength="16" data-ng-model="addressTypes[addressType].FirstName" focus-me="commonAddressTypeProps[addressType].focusOnFirstName" client-validation="onExit" data-required-on-exit="">
My attempts using
document.getElementById("shippingAddr-first-name").value="Dave";change the field but do not register correctly during the form submission. It does work however if I type it in manually. I've also tried click(), blur(), and focus(), to simulate some things I might be doing manually but those do not work either.
我尝试使用
document.getElementById("shippingAddr-first-name").value="Dave";更改字段但在表单提交期间未正确注册。但是，如果我手动输入它，它确实有效。我也试过click(), blur(), 和focus()来模拟我可能手动做的一些事情，但那些也不起作用。
采纳答案by Krzysztof Safjanowski
Trigger inputevent on element with ng-model attribute that is observable by AngularJS. Event inputis the way from where Angular knows that some changes occurs and it must run $digest loop
input在 AngularJS 可观察到的具有 ng-model 属性的元素上触发事件。事件input是 Angular 知道某些更改发生并且它必须运行 $digest 循环的方式
Some source code:
一些源代码：
// if the browser does support "input" event, we are fine - except on IE9 which doesn't fire the
// input event on backspace, delete or cut
if ($sniffer.hasEvent('input')) {
element.on('input', listener);
} else {
var timeout;
var deferListener = function(ev, input, origValue) {
if (!timeout) {
timeout = $browser.defer(function() {
timeout = null;
if (!input || input.value !== origValue) {
listener(ev);
}
});
}
};
element.on('keydown', function(event) {
var key = event.keyCode;
// ignore
// command modifiers arrows
if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;
deferListener(event, this, this.value);
});
// if user modifies input value using context menu in IE, we need "paste" and "cut" events to catch it
if ($sniffer.hasEvent('paste')) {
element.on('paste cut', deferListener);
}
}
Some working proof of concept:
一些工作的概念证明：
angular.module('app', []).controller('app', function($scope) {
$scope.user = {}
$scope.handleSubmit = function(user) {
alert('passed name ' + JSON.stringify(user))
}
})
$(function() {
$('#run').click(function() {
fillElement($('[ng-model="user.name"]'), 'some user name')
sendForm($('[ng-submit="handleSubmit(user)"]'));
})
function fillElement($el, text) {
$el.val(text).trigger('input')
}
function sendForm($form) {
$form.submit()
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
<button id="run">Execute `input` event outside AngularJS</button>
</div>
<div ng-app="app">
<div ng-controller="app">
<form ng-submit="handleSubmit(user)">
<input type="text" ng-model="user.name" />
<input type="submit" id="submit" value="Submit" />
</form>
</div>
</div>回答by michelem
You should use the data binding of AngularJS, you put an ng-modelon the input so you need to change that value to get/set the input value, in you controller you can do:
您应该使用 AngularJS 的数据绑定，您ng-model在输入上放置了一个，因此您需要更改该值以获取/设置输入值，在您的控制器中您可以执行以下操作：
.controller('myCtrl', function ($scope) {
$scope.addressTypes = [];
$scope.addressTypes['onetype'] = { FirstName: 'Dave'};
});
回答by Vineet
use angular.element
angular.element(document.querySelector("#shippingAddr-first-name")).val("Dave");
