I'm using a input type= number , but I cannot get my ng-change function to call.
<input type="number" name="numero" placeholder="1234 1234 1234 1234" ng-model="card.numero" ng-change="validar_card()" required>
my controller
$scope.validar_card=function () {
console.log(card.numero);
}
In your controller you forgot to put $scope in your console.log:
console.log($scope.card.numero);
Also dont forget to put $scope.card = {} in the beggining of the controller. Below fiddle:
http://jsfiddle.net/twizzlers/5f411u2e/1/
<input type="number" ng-model="count" ng-change="change()" />
Controller
$scope.validar_card=function(){
$scope.count++;
}
EDIT:
With your update, you are not using the $scope variable.It should be
$scope.validar_card=function () {
console.log($scope.card.numero);
}
DEMO
Related
I'm trying to retrieve an input[number] in my controller.
I found a solution which said to add a $scope.$watch on the input.
I tried it but now my number is "NaN".
<div class="offerText">
<label class="form-inline" ng-if="!admin">What will it cost ? <input type="number" class="form-control" ng-model="estimation"/></label>
<label class="form-inline">Comments <textarea rows="3" cols="50" class="form-control" ng-model="comments"></textarea></label>
</div>
And In my controller
$scope.$watch('estimation', function (val, old) {
$scope.estimation = parseFloat(val);
});
Thx for your help !
You don't need a watch. The problem here is that the input is inside an ng-if directive, which defines its own scope. The estimation is stored in the ng-if scope instead of being stored in the controller scope.
Rule or thumb: always have a dot in your ng-model.
In your controller, add
$scope.data = {};
And in the html, use
ng-model="data.estimation"
and
ng-model="data.comments"
Test if the new value is not undefined or null or something falsy, this happens because angular loops a few times through the watchs and the models, this process is call dirty checking
$scope.$watch('estimation', function (val, old) {
if (!val) {
return;
}
$scope.estimation = parseFloat(val);
});
When your value is "" or null you will always get parseFloat result as NaN
$scope.$watch('estimation', function (val, old) {
return !isNaN(val) ? parseFloat(val): 0; //considering default value is 0
});
Other possible way would get value on change, using ng-change directive.
<div class="offerText">
<label class="form-inline" ng-if="!admin">What will it cost ? <input type="number" class="form-control" ng-model="estimation" ng-change="changedEstimation(estimation)"/></label>
<label class="form-inline">Comments <textarea rows="3" cols="50" class="form-control" ng-model="comments"></textarea></label>
</div>
Controller
$scope.changedEstimation = function(val){
return !isNaN(val) ? parseFloat(val): 0;
}
I am new to angular js. In my code there is color picker initialized from a text field. User changes the value of color and I want that color to be reflected as a background of a text in a span. It is not working. What is missing?
HTML:
<body ng-app="">
<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<input type="text" name="abc" class="color" ng-change="myStyle={color:'green'}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
</body>
Plunker - http://plnkr.co/edit/APrl9Y98Em0d6rxuzRDE?p=preview
However when I change it to ng-click it works.
ng-change requires ng-model,
<input type="text" name="abc" class="color" ng-model="someName" ng-change="myStyle={color:'green'}">
I've got the same issue, my model is binding from another form, I've added ng-change and ng-model and it still doesn't work:
<input type="hidden" id="pdf-url" class="form-control" ng-model="pdfUrl"/>
<ng-dropzone
dropzone="dropzone"
dropzone-config="dropzoneButtonCfg"
model="pdfUrl">
</ng-dropzone>
An input #pdf-url gets data from dropzone (two ways binding), however, ng-change doesn't work in this case. $scope.$watch is a solution for me:
$scope.$watch('pdfUrl', function updatePdfUrl(newPdfUrl, oldPdfUrl) {
if (newPdfUrl !== oldPdfUrl) {
// It's updated - Do something you want here.
}
});
Hope this help.
When you want to edit something in Angular you need to insert an ngModel in your html
try this in your sample:
<input type="text" name="abc" class="color" ng-model="myStyle.color">
You don't need to watch the change at all!
Maybe you can try something like this:
Using a directive
directive('watchChange', function() {
return {
scope: {
onchange: '&watchChange'
},
link: function(scope, element, attrs) {
element.on('input', function() {
scope.onchange();
});
}
};
});
http://jsfiddle.net/H2EAB/
One can also bind a function with ng-change event listener, if they need to run a bit more complex logic.
<div ng-app="myApp" ng-controller="myCtrl">
<input type='text' ng-model='name' ng-change='change()'>
<br/> <span>changed {{counter}} times </span>
</div>
...
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Australia';
$scope.counter = 0;
$scope.change = function() {
$scope.counter++;
};
});
https://jsfiddle.net/as0nyre3/1/
First at all i'm seing your code and you haven't any controller. So i suggest that you use a controller.
I think you have to use a controller because your variable {{myStyle}} isn't compile because the 2 curly brace are visible and they shouldn't.
Second you have to use ng-model for your input, this directive will bind the value of the input to your variable.
I have a simple question about angularjs one-way-data-binding.
Assume that in same page, we have two input box A and B,
How can they work like:
input A will change input B, but input B will NOT change input A,
I know angular has bindonce, but I want is one-way-data-binding
thanks for your answer..... I tried, but all solutions are failed.........:(
Can we add something like directive to controll it?
You can use ng-value. It will show the model, but not update it. Doesn't require any extra JS wiring.
<input type="text" ng-model="a">
<input type="text" ng-value="a">
DEMO
DEMO
HTML
<input type="text" ng-model="a">
<input type="text" ng-model="b">
JS
// Put this code in your controller
$scope.$watch('a', function(newValue, oldValue) {
if ($scope.b === undefined || newValue !== oldValue) {
$scope.b = newValue;
}
});
Try this:
Html:
<input type="text" ng-model="a" data-ng-change="valueChange(a)">
<input type="text" ng-model="b">
Js:
$scope.valueChange=function(newValue){
$scope.b = newValue;
}
I am new to AngularJS, just making a small filter data table. I have a text box, on ng-keydown I am calling a function, in this function I want the value of that textbox.
How can I get it. My code:
HTML:
<body ng-controller="ApplicantsListCtrl">
<input type="text" class="form-control" name="company" ng-model="c" ng-keydown="filter()"></p>
</body>
JS
var app = angular.module('MyApp',[]);
app.controller('ApplicantsListCtrl',['$scope',function($scope){
$scope.filter = function(){
console.log($scope.c);
};
}]);
I am getting undefined in my log.
Is this correct way to do it?
<input type="text" data-ng-change="key(data)" data-ng-model="data"/>
$scope.key = function (data) {
console.log(data);
};
This works.
Rather than keydown, use $watch. See the plunker here
I would use ng-change="filter(c)"
for ng-Change, is there way to trigger it only when on blur?
Similar to jquery on('change')?
I am seeking for a pure angular way of doing this.
Use ng-model-options
$scope.onchange = function () {}
<input type="text" ng-model="x" ng-change="onchange()" ng-model-options="{updateOn: 'blur'}"/>
Starting with release 1.2.0rc1 there is an ng-blur directive
jsfiddle: http://jsfiddle.net/9mvt8/6/
HTML:
<div ng-controller="MyCtrl">
<input type='text' ng-blur='blurCount = blurCount + 1'/>
<input type='text' ng-blur='blurCount = blurCount + 1' />
blur count: {{blurCount}}
</div>
Script:
function MyCtrl($scope) {
$scope.blurCount = 0;
$scope.name = 'Superhero';
}
If you use ng-blur, and then (as Jason said) use the handler to check for input class="ng-dirty", that will tell you if the input value has changed.