How to set a scope value in angular's dropdown menu from the console?

[Piotr Białuch]

Hello Everyone!

I would like to set/change a value in a dropdown menu that has been written in AngularJS in the Debugger located in the Developer Tools.

Below you will find a HTML code copied from DOM of the element:

<select name="creditReason" 
    class="input-group ng-pristine ng-isolate-scope ng-empty ng-invalid ng-invalid-required ng-touched"
    id="creditReason"
    required="required"
    ng-change="change ? change() : _.noop()" 
    ng-model="model" 
    ng-options="type.value as type.name for type in list"
    ng-disabled="(disableField || disabled)" 
    ng-required="lookupRequired" 
    ng-attr-id="{{lookupId}}" 
    model="confirmDialogCtrl.creditReasonCodeId" 
    lookup="creditReasons" 
    lookup-required="true" 
    lookup-name="creditReason" 
    lookup-id="creditReason"
    ng-attr-name="{{lookupName}}">
  <option selected="selected" value="?"></option>
  <option value="number:39001" label="Customer Request">Customer Request</option>
  <option value="number:39002" label="Discount Not Applied">Discount Not Applied</option>
  <option value="number:39003" label="Duplicate Billing">Duplicate Billing</option>
  <option value="number:39004" label="Incorrect Address">Incorrect Address</option>
  <option value="number:39005" label="Incorrect Billing Method">Incorrect Billing Method</option>
  <option value="number:39006" label="Incorrect Cost Center">Incorrect Cost Center</option>
  <option value="number:39007" label="Incorrect Customer/Season">Incorrect Customer/Season</option>
  <option value="number:39008" label="Incorrect PO">Incorrect PO</option>
  <option value="number:39009" label="Incorrect Rate">Incorrect Rate</option>
  <option value="number:39010" label="Incorrect Rental Period">Incorrect Rental Period</option>
  <option value="number:39011" label="Sales Tax">Sales Tax</option>
  <option value="number:39012" label="Other">Other</option>
</select>

I have tried following methods:

angular.element(
    getElementsByClassName('input-group ng-pristine ng-isolate-scope ng-empty ng-invalid ng-invalid-required ng-touched')[0]
).scope().model = 'Incorrect PO'"
angular.element(document.getElementsByClassName("input-group ng-pristine ng-isolate-scope ng-empty ng-invalid ng-invalid-required ng-touched
")[0]).scope().$apply(() => $scope.model = "number:39001")
However none of them worked.
Could you please advise how can I change the dropdown's value from the Console?

Thanks!

[Sander Elias]

Hi Piotr,

Add a method/function to the controller in your angular app, and then expose that in the global scope. This is not a good idea and leads to all kinds of security issues. 
Isn't it simpler to change your app to reflect the update you need?

Regards

Sander

[Piotr Białuch]

Dear Sander,

Thank you for your e-mail.

Unfortunately I am not able to add any methods nor functions to the script.

I am writing an automation tool with the usage of Python + Selenium WebDriver for my company. Everything has been done, however I am stuck at this specific point - I need to change the value of the dropdown menu 'from the outside' -> by using Developer's Tool's Console.

Thanks for understanding!

Piotr

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/4154e6a7-172b-4411-9c06-4e98a467d513%40googlegroups.com.