<input type="text" id="exampleab"
ng-model="a.b"
ui-event="{ blur : 'callScriptThenServer()' }" >
For some reasons the ng-change on textbox is not working so i am using it; Using Angular-ui's ui-events.
PROBLEM
I want to call the function only if the value is changed and also want the old value in callback.(since I want to send the oldValue to the server).
I don't want to go via pure directives route because there are so many occurrences of these
NG-CHANGE : on each character changed i get a callback . I don't want that. I need to call the server script .. with the old value in the text box and the new value after blur
You can watch your variable to have the newValue and oldValue at the same time.
<input type="text" id="exampleab" ng-model="a.b" >
In your controler:
app.controller('ctrl', function ($scope) {
$scope.$watch('a.b', function (newValue, oldValue) {
console.log('oldValue=' + oldValue);
console.log('newValue=' + newValue);
//do something
});
});
JSFiddle
EDIT
You mentioned a new requirement in your edit so i edit my answer.
You shouldn't use ng-change. you should get the oldValue when the control being focused and save it in a variable and then get the new value on blur event.
I set up a new fiddle.
In your controller :
app.controller('ctrl', function ($scope) {
$scope.showValues = function () {
alert('oldValue = ' + $scope.oldValue);
alert('newValue = ' + $scope.a.b);
}
});
I your view
<input type="text" id="exampleab" ng-model="a.b" ng-init="oldValue = ''" ng-focus="oldValue = a.b" ng-blur="showValues()" />{{a.b}}
Use ng-model-options
<input type="text" ng-model="a.b" ng-change="callScriptThenServer()" ng-model-options="{updateOn: 'blur'}"/>
You can use AngularJS Watch
$scope.$watch(function(){
return $scope.a.b;
}, function(newvalue, oldvalue){
//Here You have both newvalue & oldvalue
alert("newvalue: " + newvalue);
alert("oldvalue: " + oldvalue);
},true);
Plunkr DEMO
Use Angular ngModelOptions with getterSetter:true; and then use method call inside the "set" part of the function.
See the last example on this page:
https://docs.angularjs.org/api/ng/directive/ngModelOptions
Related
I want to make a Roman numeral calculator that converts numbers, typed in a text input, to the numerals instantly. I understand how to bind a variable to the text input but I don't know how to 'perform a function' on it as it's being typed. How do I do this?
Thanks.
Use the ng-change directive : here the docs
Example
In template
<input type="text" ng-change="yourFunction(value)" ng-model="value"/>
In controller
$scope.value = ""
$scope.yourFunction = function(value){
//Put code logic here
}
EDIT :
In your case, you can also create a filter
module.filter("convertToRomanNumber", function(){
//Improve code logic here
return function(input){
var value="";
for(var i=0; i<input; i++){
value+="I"
}
return value;
}
})
and call it in your template
<input type="text" ng-change="yourFunction(value)" ng-model="value"/>
{{value | convertToRomanNumber}}
$scope.watch on the ng-model of the text input. Then run the code you want to execute on the ng-model variable.
e.g.
// html...
<input type=text ng-model="textBox" />
// controller
$scope.$watch('$scope.textBox', function(newValue, oldValue) {
// do stuff to the text everytime it changes
});
The benefit of this $scope.$watch is for example you don't want to execute the function on the newValue unless it is 2 or 3 characters more. It just gives you some more control over the function compared to a simple ng-change.
I want to update a text value when the value is changed by using some method, the method should not call when I am still typing text but when exit from the textbox or change it through script code:
<input type="text" ng-model ="model.value" ng-change = "update()"/>
what should contain update() method,
what I tried is : wrote a directive for this textbox, and
scope.$watch('model', function(nval,oval){
if ((oVal === undefined) && (nVal != undefined)){
update()
}
});
It is calling for the first time, but not whenever the model value changed.
I want to call update method whenever the model.value changed, but not while entering text
You can use ng-blur and you should change your $watch:
JSFiddle
HTML:
<div ng-app="myApp" ng-controller="dummy">
<input type="text" ng-model="model.value" ng-blur="update()"/>
</div>
JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.model = {
value: 'hello'
};
$scope.update = function () {
console.log("changed!");
};
$scope.$watch('model.value', function (nval, oval) {
if (oval !== nval) {
$scope.update();
}
});
}]);
You can use data-ng-model-options directly to achieve your requirement.
Like,
here you can get full reference of data-ng-nmodel-options
https://docs.angularjs.org/api/ng/directive/ngModelOptions
this directive will work for the versions angular 1.4.x ( from 1.4.x version it suppports)
I'm trying to integrate an upload script into my page. Im using uploadcare.com. They provided a simple directive but I just can't get it to work:
https://github.com/uploadcare/angular-uploadcare/blob/master/angular-uploadcare.js
I'm setting ng-model="test" and in my controller I have the following:
angular.module('testApp')
.controller('MyCtrl', function ($scope) {
$scope.test = "test";
});
The html code looks like that:
<uploadcare-widget ng-model="test" data-public-key="xyz" />
When I check Firebug I can see that the widget works:
<input type="hidden" role="uploadcare-uploader" ng-model="test" data-public-key="6e0958899488d61fd5d0" data-crop="1200:630" value="http://www.ucarecdn.com/ca5513da-90f1-40d1-89e7-648237xxxxxx/-/crop/2560x1344/0,128/-/preview/" class="ng-isolate-scope ng-valid">
But this input value is never populated back to my "$scope.test". Why is that?
When I output $scope.test it still says "test" instead of my image path value.
You can use $watch in angular
$scope.$watch('test', function(newValue, oldValue) {
console.log($scope.test);
});
Or the function provided by uploadcare
$scope.onUCUploadComplete = function(info){
console.log(info);
};
Which is a callback function after image is uploaded
Please check the scope of test model.
You can also update scope variable inside directive like
scope.test = $element.value()
Here is my Plunker : Demo .
here is my code:
Controller :
$scope.myDate='13930101';
$scope.showDate=function() {
PersianDatePicker.Show('thisDate', $scope.myDate);
};
$scope.$watch( 'myDate',
function(newValue, oldValue){
console.log('myDate Changed');
console.log(newValue);
console.log(oldValue);
}
);
Html :
<input type="text" id="thisDate" ui-mask="9999/99/99"
ng-model="myDate" />
<input type="button" value="test" ng-click="showDate()">
The problem is : i can't see the changes for this : $scope.myDate='13930101';
Or
My codes are wrong!
Any idea ? Thanks ahead
Hay the problem is that the watcher is only for the input field, if you type something directly in the input field, the watcher triggers. But if you choose a date from the picker. it doesnt trigger.
This lib contains no documentation. From inspecting the scripts I see there is no other API function than Show() and therefore no callback like onSelect() which lets you bind the chosen date to your scope variable.
I suggest to use another lib like this one which is already angularized.
I have mentioned my HTML.
<div ng-controller="myCtrl">
<input type=text ng-model="name">
</div>
in my JS file
function myCtrl($scope){
$scope.name=//this field comes from DB say 'ABC'
}
My question :
When my html is get loaded, it will disply "ABC" in textbox. Which is fine.
Now if user change that name to "XYZ", So $scope.name value is "XYZ".
So I need to identify that input value is changed. Previous value is "ABC" and now the value is "XYZ" how we can figured it out that value is changed?
You can use the ngChange directive.
<input type="text" ng-model="name" ng-change="change()">
Then, in your controller, add a method called change to the scope:
$scope.change = function () {
console.debug('Changed to ' + $scope.name);
}
Do it like this:
function myCtrl($scope){
$scope.$watch('name', function(newValue, oldValue){
});
}
function myCtrl($scope){
var dbName= 'ABC'; //this field comes from DB say 'ABC'
$scope.name= dbName;
$scope.$watch('name', function(newValue) {
if(newValue != dbName) {
// do something
}
});
}