called whenever the user changes the input’s value. Nevertheless, a potential problem with this approach is that it work only when the end-users type in the input field. But what if other inputs bind to this property in the model? What if it gets updated when data comes in from the server or the end-user pushes a button (as in the below example) ? Well, to update the field no matter how it gets updated, we want to use a $scope function called $watch.
In both cases, the "@" is added by pressing the button. Notice the ng-change cannot monitor this change, while $watch do what ng-change do and more!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular/angular.min.js"></script>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
<script>
angular.module("myModule", [])
.controller("myCtrl", function ($scope) {
$scope.yourEmailWithoutWatchHasChanged = 0;
$scope.yourEmailWithoutWatch = "";
$scope.yourEmailWithWatchHasChanged = 0;
$scope.yourEmailWithWatch = "";
$scope.yourEmailWithoutWatchHasChangedAction = function () {
$scope.yourEmailWithoutWatchHasChanged = $scope.yourEmailWithoutWatch.length;
}
$scope.yourEmailWithWatchHasChangedAction = function () {
$scope.yourEmailWithWatchHasChanged = $scope.yourEmailWithWatch.length;
}
$scope.addAtCharacterWithoutWatchAction = function () {
$scope.yourEmailWithoutWatch = $scope.yourEmailWithoutWatch + "@";
}
$scope.addAtCharacterWithWatchAction = function () {
$scope.yourEmailWithWatch = $scope.yourEmailWithWatch + "@";
}
$scope.$watch('yourEmailWithWatch', 'yourEmailWithWatchHasChangedAction()');
});
</script>
</head>
<body>
<div ng-app="myModule">
<div id="myPanel" class="panel" ng-controller="myCtrl">
<h4 class="panel-header">$watch vs. ng-change test ...</h4>
<hr/>
<form>
Your e-mail: <input ng-change="yourEmailWithoutWatchHasChangedAction()"
ng-model="yourEmailWithoutWatch">
<button class="btn" ng-click="addAtCharacterWithoutWatchAction()">
Add At(@) Character</button>
<span class='label label-primary'>Your e-mail has
{{yourEmailWithoutWatchHasChanged}} characters (without watch).</span>
</form>
<hr/>
<form>
Your e-mail: <input ng-model="yourEmailWithWatch">
<button class="btn" ng-click="addAtCharacterWithWatchAction()">
Add At(@) Character</button>
<span class='label label-primary'>Your e-mail has
{{yourEmailWithWatchHasChanged}} characters (with watch).</span>
</form>
</div>
</div>
</body>
</html>
Niciun comentariu:
Trimiteți un comentariu