How can I console.log expression in AngularJS?

Question

As a new "Angularian", I have this:

<div data-ng-app="" data-ng-init="">
    <input type="text" ng-model="hello">
    <p>{{hello}}</p>
</div>

But I wonder, how can I console.log whatever I type in the expression (ng-model)?

(e.g. if I type "Soylent Green is people" in the text field I want to see it in Chrome's Inspector window)

have ng-change event with function on input field & then have that function inside controller & from that function do console.log($scope.hello) — Pankaj Parkar
– Pankaj Parkar, Commented Aug 28, 2016 at 11:42
ok, sounds a bit unnecessarily complicated by the angular crew but I'll give it a try nonetheless :) — moller.peter
– moller.peter, Commented Aug 28, 2016 at 11:50
may I know what you felt complicated? you have to write code to behave the way you want. — Pankaj Parkar
– Pankaj Parkar, Commented Aug 28, 2016 at 11:58
Just to add my 2 cents. Angular comes with it's own log function, $log. But as @PankajParkar points out, console.log is itself a function, so you have to at least bind it to some event for it to fire and return something. Just for fun I made this jsfiddle, I have no idea how well it will work across other browsers, but it seems to fire nicely in Chrome, but I am not recommending this as a solution. jsfiddle.net/lharby/5vr1aoew — lharby
– lharby, Commented Aug 28, 2016 at 13:53

w-robot · Accepted Answer · 2016-08-28 11:49:16Z

1

You can use console.log($scope.hello); inside your controller.

I suggest you to take a look about Addons/Extensions like Batarang and ng-inspector. This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.

answered Aug 28, 2016 at 11:49

w-robot

896 bronze badges

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

Comments

Walioul Islam · Accepted Answer · 2016-08-28 13:26:30Z

1

Use ng-change directive with your input tag like

<input type="text" ng-model="hello" ng-change="textChange()" >

and in your controller

$scope.textChange = function () {
          console.log($scope.hello);
  }

https://jsfiddle.net/walioulislam/wpjwavrc/

edited Aug 28, 2016 at 13:26

answered Aug 28, 2016 at 12:19

Walioul Islam

113 bronze badges

Comments

Prashant Pandey · Accepted Answer · 2016-08-28 11:53:37Z

0

You have a controller for this app, if you don't know about controllers you can read the documentation in w3schools You can do console.log($scope.hello) inside your controller By default each and every variable you define in HTML is inside $scope object

answered Aug 28, 2016 at 11:53

Prashant Pandey

231 silver badge7 bronze badges

Collectives™ on Stack Overflow

How can I console.log expression in AngularJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related