使用javascript更改AngularJS輸入文本值

我試圖在瀏覽器擴展中運行javascript以自動填充網站上的表單，然後單擊按鈕的過程 - 可以通過鍵入javascript模擬擴展代碼：代碼到地址欄中。使用javascript更改AngularJS輸入文本值

我遇到問題的網站使用angularJS。我有輸入字段ID的名稱，並使用它們來更改輸入字段值。這些字段填滿了，但是當我點擊按鈕時，它表示它們沒有填充，沒有值，它們都是錯誤的。一些驗證正在進行，除非手動輸入值，否則不會「看到」我的更改。

是否有一種簡單的方法來改變僅使用輸入字段的ID進行驗證的AngularJS輸入字段的值。

下面是代碼：使用

<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";變化的領域，但不提交表單中正確註冊。不過，如果我手動輸入它，它確實有效。我也嘗試過點擊（），模糊（），焦點（），來模擬手動做的一些事情，但那些也不起作用。

來源

2015-07-19 techdog

您使用jQuery嗎？我認爲如果你使用jQuery會更容易。 –

我沒有使用jquery。 – techdog

input觸發與NG-模型屬性元件上事件是observab由AngularJS提供。事件input距離的方式，其中角知道會發生一些變化，它必須運行$消化循環

一些源代碼：

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

來源

2015-07-20 00:18:31

謝謝。雖然我不太瞭解jquery，或者angularjs完全可以給我足夠的代碼來解決它。只要我能得到角元素，然後使用觸發器（「輸入」），它似乎可以解決問題。 – techdog

使用angular.element

angular.element(document.querySelector("#shippingAddr-first-name")).val("Dave");

來源

2015-07-19 06:37:24 Vineet

我試圖從地址欄使用javascript：該代碼但angularjs似乎沒有註冊更改，當我點擊按鈕。 – techdog

您應該應用更改。你應該檢查一下。 http://stackoverflow.com/questions/31301475/call-angularjs-from-other-scripts/31301533#31301533 – Vineet

，您應該使用數據AngularJS的結合，您輸入放一個ng-model，所以你需要更改值獲取/設置的輸入值，在您控制器，你可以做：

JSFiddle

.controller('myCtrl', function ($scope) { 
    $scope.addressTypes = []; 
    $scope.addressTypes['onetype'] = { FirstName: 'Dave'}; 
});

來源

2015-07-19 06:53:19

謝謝你回答和創建示例。我改變了描述，以更清楚我的嘗試。我必須使用的是輸入字段的id和我可以使用javascript和id讀取的任何參數。 – techdog

使用javascript更改AngularJS輸入文本值

回答

相關問題