CODEWITHSUNDEEP
javascriptangularjsfunctionangularjs-scope
Alex Coroza
Alex Coroza

Reputation: 1757

AngularJS - passing this.value into a function

I have this code in native javascript and it works all right. it logs the textbox's current value

<script>
    var boom = function(val) {
        console.log(val);
    };
</script>

<input type="text" onclick="boom(this.value)"/>

Then I want to do the same on AngularJS without using model. Here is the code:

$scope.boom = function(val) {
    console.log(val);
};

<input type="text" ng-click="boom(this.value)"/>

But it always logs undefined!
Why?

Upvotes: 10

Views: 42012

Answers (3)

dfsq
dfsq

Reputation: 193251

The Angular way is to use ngModel:

<input type="text" ng-model="input" ng-click="boom()"/>

and in controller:

var boom = function() {
    console.log($scope.input);
};

this.input will also work since this points to current scope object.

If you still want to avoid model then you can use event object:

<input type="text" ng-click="boom($event)"/>

and

var boom = function($event) {
    console.log($event.target.value);
};

Upvotes: 10

Pedro Justo
Pedro Justo

Reputation: 4289

'value' is not defined in scope.

I'll expand a little Miraage answer..

this will refer to the scope. If you want to access the DOM element use $event. In the callback function you can get the DOM element value using boom($event.target.value)

Upvotes: 1

Miraage
Miraage

Reputation: 3464

As I know, this in context of ng-* is a scope.
You may access via boom($event.target.value).

Upvotes: 23

Related Questions