使用javascript更改AngularJS输入文本值
使用javascript更改AngularJS输入文本值
提问于 2015-07-19 14:35:52
我正在尝试在浏览器扩展中运行javascript，以自动执行在网站上填写表单然后单击按钮的过程--扩展代码可以通过在地址栏中键入javascript:code来模拟。
我遇到问题的网站使用的是angularJS。我有输入字段I的名称，并使用它们来更改输入字段的值。字段已填充，但当我单击按钮时，它显示它们未填充，没有值，并且它们都是错误的。一些验证正在进行，除非我手动输入值，否则无法“看到”我的更改。
有没有一种简单的方法来更改AngularJS输入字段的值，这些字段只使用输入字段的id进行验证。
代码如下：
<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="">我尝试使用document.getElementById("shippingAddr-first-name").value="Dave";更改字段，但在表单提交期间没有正确注册。但是，如果我手动键入它，它确实可以工作。我还尝试了click()、blur()和focus()，以模拟我可能正在手动执行的一些操作，但这些也不起作用。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-07-20 08:18:32
在具有ng- input属性的元素上触发AngularJS可观察到的模型事件。事件input是Angular知道某些变化发生的地方，它必须运行$digest循环
一些源代码：
// 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);
}
}一些有效的概念证明：
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>
Stack Overflow用户
发布于 2015-07-19 14:53:19
您应该使用AngularJS的数据绑定，您在输入上放置了一个ng-model，因此您需要更改该值以获取/设置输入值，在您的控制器中，您可以这样做：
JSFiddle
.controller('myCtrl', function ($scope) {
$scope.addressTypes = [];
$scope.addressTypes['onetype'] = { FirstName: 'Dave'};
});Stack Overflow用户
发布于 2015-07-19 14:37:24
angular.element(document.querySelector("#shippingAddr-first-name")).val("Dave");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31498629
复制相关文章
相似问题
腾讯云开发者
