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)"
Related
I'm having trouble with hidden input. I have this html:
<form ng-controller="FormCtrl as a" ng-submit="a.something(a.form)" novalidate>
<input type="hidden" ng-model="a.form.unitPrice" ng-init="a.form.unitPrice = product.prices[0].price" value="{{a.form.option}}">
...
Value of a.form.unitPrice is dinamically changing. Controller:
this.addToCart = function(a) {
console.log(a);
console.log ($scope.a.form.unitPrice);
};
Try calling
$scope.$digest();
I've noticed also that angular is not updating not visible elements.
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.
The original question asked about how to determine which element called the controllers blurr function, but I didn't clarify that I was not specifically asking about ng-blur, but ng-* (ng-change, ng-focus, ng-mouseover, ng-*) in general. So, with that in mind:
How do I determine which element input is calling the blurr() and/or check() functions?
html
<body ng-app="test">
<div ng-controller="Cntrlr as cntrlr">
<form name="meta_test">
<input type="text" name='inpt' ng-model="cntrlr.inpt" ng-blur="cntrlr.blurr()" ng-change="cntrlr.check()" />
<input type="text" name='second' ng-model="cntrlr.second" ng-blur="cntrlr.blurr()" ng-change="cntrlr.check()" />
</form>
</div>
</body>
js
var app = angular.module("test", []);
app.controller("Cntrlr", ["$scope", function($scope){
this.blurr = function(){
alert("which input am I?");
alert("this is so meta.");
// ?
};
this.check = function(){
alert("this is how meta I am:");
alert(this);
}
$scope.Cntrlr = this; // see: (reference)
return $scope.Cntrlr;
}]);
You may be asking yourself "why would he want to do this?"
There are 2 reasons:
because I want to call:
$scope.user_form[meta_test.[(whatever this element is.name)]].$setValidity('spike', false);
because I'm curious. There has to be a simple way to do this.
(reference):
controller as syntax
Use this -
<input type="text" name='inpt' ng-model="cntrlr.inpt" ng-blur="cntrlr.blurr($event)" ng-change="cntrlr.check()" />
This returns the jQuery lite version of the event that causes the blurr function. Once you receive this element in your controller, you can pretty much do whatever you want with it.
The .target attribute of the event will give you the required element.
Should work
Try this:
<form name="meta_test">
<input type="text" name='inpt' ng-model="cntrlr.inpt" ng-blur="cntrlr.blurr()"
ng-change="cntrlr.check('One')" />
<input type="text" name='second' ng-model="cntrlr.second"
ng-blur="cntrlr.blurr()" ng-change="cntrlr.check('Two')" />
</form>
In JS,
this.check = function(Type){
if(Type == "One"){
//Then it is the first text box.
}else if(Type == "Two"){
//Then it is the second text box.
}
}
I have some text fields on my web page. Is there a way that I can call a function when a user changes a value in a text field without using a watch?
Yes. Check out ng-change. It allows you to run a function when an input changes.
<script>
function Controller($scope) {
$scope.counter = 0;
$scope.change = function() {
$scope.counter++;
};
}
</script>
<div ng-controller="Controller">
<input type="text" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
<tt>counter = {{counter}}</tt><br/>
</div>
I don't have enough mana to make comment, so - for delaying fire action you can use ng-model-options directive and debounce
Details in documentation: https://docs.angularjs.org/api/ng/directive/ngModelOptions
I have a template that is loaded in a modal dialog, there is a single input text on it which I would like to have a focus on. What is the easiest and the Angular way of doing that?
Update:
This is in part answered in How to set focus on input field?
Depending on the browser(s) you need to support you could use input autofocus attribute.
See plunker here.
Or if this is not an option and has mentioned by Mark you can refer to the following stackoverflow response.
How about this?
HTML
<div ng-controller="ctrl as vm" ng-init="vm.focus();">
<form name="Form">
<input type="text" id="input1">
<input type="text" id="input2">
</form>
JS
angular.module('app', []).controller('ctrl', function() {
var vm = this;
vm.focus = function() {
document.getElementById('input2').focus();
};
});
https://plnkr.co/edit/noLUjVjycpnezpvEIgw7?p=preview
The simplest solution I've found is to call focus inside a $timeout wrap.
Controller:
$timeout(function () { $('#input1').focus(); });