I am trying to convert a JQuery website to AngularJS, but I can't figure this one out.
In JQuery I used:
$('.bet').change(function(e) {
// Do someting
};
I tried to do multiple things with AngularJS but no success.
At the moment I have this in my HTML and I have nothing related in my Angular file
index.php
<input type="number" class="form-control" id="bet" name="bet" placeholder="Your bet" ng-model="bet" ng-change="bet( {{bet}} )"/>
How to do this in AngularJS?
From the documentation:
Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).
So basically you need to bind a function to a ng-change attribute, like this way:
<input type="number" name="bet" placeholder="Your bet" ng-model="bet" ng-change="betChanged(bet)"/>
and the listener in your controller:
$scope.betChanged = function(bet){
//do something...
console.log(bet);
}
Like this, betChanged will be called every time bet will change, much like the native javascript input function.
ng-change attribute is correct, however passing the bet into $scope.betChanged is unnecessary since you have access to the same variable via $scope.betvar myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', ['$scope', function($scope) {
$scope.bet = "";
$scope.onBetChanged = function () {
alert($scope.bet);
};
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="number" class="form-control" id="bet" name="bet" placeholder="Your bet" ng-model="bet" ng-change="onBetChanged()"/>
</div>
ng-change responds differently than jquery changewhat about $watch
<div ng-app="myApp" ng-controller="myCtrl">
First Name:
<input type="text" ng-model="firstName"><br>
Full Name: {{firstName }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $window) {
$scope.$watch('firstName', function (newValue, oldValue) {
console.log('oldValue=' + oldValue);
console.log('newValue=' + newValue);
//do something
$window.alert("Event fired");
});
});
</script>
