value of input field bind in angularjs

Question

I have a strange behavior in my browser with an input field. When I inspect it in developer console it looks like this:

<input type="text" name="siteName" ng-model="model.name" minlength="3"
       maxlength="40" ng-disabled="!model.isEditable || disableUpdate"
       required=""
       class="ng-pristine ng-untouched ng-empty ng-valid-namevalidation ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength">

After the page is rendered, in chrome developer console, I select this input field like this:

var x = document.querySelector('input[name="siteName"]')

and I get it in console. This input field has a value in UI (a string, not empty) - is filled by angularjs in this way: ng-model="model.name". model.name has a valid string value.

when I call x.value in console, I get an empty string.

More, in chrome developer console, when inspect an element, I can access it using $0. And $0.value returns me the correct value.

Anyone had such issue? Any idea how to get using query selector the value for the input field?

Thank you.

Depends on when you call that. Might be before angular has compiled that ng-model — charlietfl, Aug 01 '19 at 14:09
AngularJS was not designed for you to get the value in this way. This is not strange behavior, this is just how AngularJS works. Depending on where you are at in the digest cycle, value can be different — Pop-A-Stash, Aug 01 '19 at 15:20
Install [this extension](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?utm_source=chrome-ntp-icon) - It will allow you to inspect the scope properties of any element in the elements tab on the developer tools — Alon Eitan, Aug 01 '19 at 16:37
As I mentioned, this issue happened in console, after the page is fully loaded and the text (value) rendered in the input field. — Zelter Ady, Aug 02 '19 at 18:49
The `` element shows the element after it has been manipulated by the AngularJS framework. What is it before AngularJS changes it. — georgeawg, Aug 04 '19 at 17:48

score 1 · Accepted Answer · answered Aug 04 '19 at 11:38

If you are trying to access the angular scope from the chrome developer console,

try angular.element(document.querySelector("<selectors>")).scope()

you can get more information about this query in the following answer

How do I access the $scope variable in browser's console using AngularJS?

score 0 · Answer 2 · answered Aug 01 '19 at 16:49

When the code changes $scope values, the AngularJS framework requires a digest cycle to update the DOM and the browser needs a tick to render changes to the DOM.

Use the $timeout service to wait before inspecting DOM elements:

app.controller("ctrl",function($scope, $timeout) {
     $scope.model = { name: "siteXXXX" };

     var x = document.querySelector('input[name="siteName"]');
     console.log("before ",x.value);  //undefined

     //ADD time to render
     $timeout(function() {
       console.log("after", x.value); //siteXXXX
     });
})

The DEMO on PLNKR

For more information, see

AngularJS $timeout Service API Reference

George, this issue happened when I try to get to that value from developer console, in chrome, after full page load. — Zelter Ady, Aug 02 '19 at 18:54

value of input field bind in angularjs

2 Answers2