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
– charlietfl, Commented Aug 1, 2019 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
– Pop-A-Stash, Commented Aug 1, 2019 at 15:20
Install this extension - It will allow you to inspect the scope properties of any element in the elements tab on the developer tools — Alon Eitan
– Alon Eitan, Commented Aug 1, 2019 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
– Zelter Ady, Commented Aug 2, 2019 at 18:49
The <input> element shows the element after it has been manipulated by the AngularJS framework. What is it before AngularJS changes it. — georgeawg
– georgeawg, Commented Aug 4, 2019 at 17:48

Ajanthan Mani · Accepted Answer · 2019-08-04 11:38:07Z

1

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?

answered Aug 4, 2019 at 11:38

Ajanthan Mani

5094 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georgeawg · Accepted Answer · 2019-08-01 16:49:37Z

0

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

answered Aug 1, 2019 at 16:49

georgeawg

49k13 gold badges78 silver badges98 bronze badges

1 Comment

Zelter Ady Over a year ago

George, this issue happened when I try to get to that value from developer console, in chrome, after full page load.

Collectives™ on Stack Overflow

value of input field bind in angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related