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?
As I know, this in context of ng-* is a scope.
You may access via boom($event.target.value).
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);
};
ng-click="boom(input)"? No need to pass in the event.'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)