I am using a form control which has set of input boxes.
<form class="form-horizontal" role="form">
<input ng-model="editPagename" class="form-control" required/>
<input ng-model="editUrl" class="form-control" required/>
</form>
The value of editPagename is not getting updated in the scope and it's not even entering in the function.
$scope.$watch('editPagename', function(newVal, oldVal) {
console.log(newVal);
});
Do you have any suggestions on how to solve this problem?
try
$scope.$watch( function() {
return $scope.editPagename;
}, function(newVal, oldVal) {
console.log(newVal);
});
As it has been indicated that $scope will go bye bye in the future (you can have a read at this "preparing for the future of angularjs" on airpair, also a link the the youtube video of the ng-europe talk), and you might want to write your code for easy upgrading to 2.x
So, unless you absolutely need $scope for something, try this:
index.html
<body ng-controller="MainCtrl as vm">
<p>Hello {{vm.name}}!</p>
<div>
<form class="form-horizontal" role="form">
<input data-ng-model ="vm.name" data-ng-change="vm.checkValue(vm.name)" class="form-control" required/>
</form>
</div>
</body>
app.js
app.controller('MainCtrl', function() {
vm = this;
vm.name = "world";
vm.checkValue = checkValue;
function checkValue(value){
console.log(value);
}
});
And a plunker link with the example.
No $scope needed. And of what I can tell, does what you are asking.
Its working for me.Here what I have tried.
HTML :
<div ng-controller="testCtrl">
<form class="form-horizontal" role="form">
<input ng-model ="editPagename" class="form-control" required/>
<input ng-model="editUrl" class="form-control" required/>
</form>
</div>
JS :
app.controller("testCtrl",function($scope){
$scope.$watch( 'editPagename', function(newVal, oldVal) {
console.log(newVal);
});
})
Its logging in the console.
EDIT CODE :
Its better to use Objec model rather than primitive datatype.
Here is the code snippet.
HTMl
<div ng-controller="testCtrl">
<form class="form-horizontal" role="form">
<input ng-model ="objEdit.editPagename" class="form-control" required/>
<input ng-model="objEdit.editUrl" class="form-control" required/>
</form>
{{objEdit}}
</div>
JS :
app.controller("testCtrl",function($scope){
$scope.objEdit = {};
})
Related
I am having multiple input text in form and on ng-focus I am calling a method let's say GetFieldName().
I my angular.js how can I detect that method having the focus on first field or second.
How can I validate that withing getFieldName() method to get field which have focus on it.
The best solution is to make angularJS directive to get the attrs
or to make the validation
https://docs.angularjs.org/guide/forms
This is solution with controller and $event to get the name attribute from element
var myApp = angular.module('myApp',[]);
myApp.controller('formCtrl', ['$scope', function($scope) {
$scope.text = "sample text";
$scope.getName = function(event){
$scope.text = event.target.getAttribute('name');
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<form ng-controller="formCtrl">
{{text }}
<input type="text" name="text1" ng-focus="getName($event)">
<input type="text" name="text2" ng-focus="getName($event)">
<input type="text" name="text3" ng-focus="getName($event)">
<input type="text" name="text4" ng-focus="getName($event)">
</form>
</div>
HTML:
<html ng-app="app">
<div class="container" style="margin-top: 30px">
<input type="text" ng-model="newName" key-filter/>
<input type="text" ng-model="newName" key-filter/>
<input type="text" ng-model="newName" key-filter/>
<input type="text" ng-model="newName" key-filter/>
</div>
</html>
JS:
var app = angular.module('app', []);
app.directive('keyFilter', function() {
var pattern = /([\s !$%^&*()_+|~=`{}\[\]:";'<>?,.\/])/;
function link(scope) {
scope.$watch('model', function() {
if(scope.model === undefined)
return
if(pattern.test(scope.model)) {
scope.model = scope.model.replace(pattern, '');
Materialize.toast('Denied symbol', 4000, 'rounded');
}
});
}
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: link
}
});
I have many inputs which are bind to the same model, and I am filtering user input, when user press a denied key I wanted to show a toast to inform him that he can't use this symbol, but the count of toasts is equal to the count of inputs bind to the same model.
I thought i'm working only with model which is one.
Example here:
http://codepen.io/anon/pen/XbLjVY?editors=101
How can I fix that, or change the logic how it works
p.s. angular beginner
If they are all bind to the same model every change in one is send to the others, so just put your directive on one input not all of them.
Here is a working plunkr :
http://plnkr.co/edit/dI5TMHms2wsPHc9Xqewf?p=preview
using :
<input type="text" ng-model="newName" key-filter/>
<input type="text" ng-model="newName" />
<input type="text" ng-model="newName" />
<input type="text" ng-model="newName" />
You can see in the console the message being displayed only once and from any input field
I want my controller to perform some action when a user clicks in a form field (when the form field gets focus). How can I do this? See this plunker.
Here is my controller:
angular.module('myApp', [])
.controller('AppCtrl', ['$scope',
function($scope) {
$scope.field1 = "Default text";
$scope.focus = false;
$scope.formFieldJustGotFocus = function() {
$scope.focus = true;
// Do all the stuff I need to happen when the form has just gotten focus
}
}
]);
And here is the view:
<body ng-app="myApp" ng-controller="AppCtrl">
<h3>Testing</h3>
<p>I want to perform some action in the controller when a form field gets focus. How can I best achieve this?</p>
<form name="myForm">
<input type="text" name="field1" ng-model="field1">
</form>
<p>Form field has focus: {{focus}}</p>
</body>
You can use the ngFocus directive. The inverse is ngBlur.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" ng-focus="isFocused = true" ng-blur="isFocused = false">
<p ng-if="isFocused">Focus !</p>
</div>
<input type="text" name="field1" ng-model="field1" ng-focus="formFieldJustGotFocus()">
use like this ng-focus
Try ng-focus.
See more info:
https://docs.angularjs.org/api/ng/directive/ngFocus
use -> ng-focus
<input type="text" name="field1" ng-model="field1" ng-focus="formFieldJustGotFocus();">
this plunker
in the code he had written the function formFieldJustGotFocus(), but it was not bound to the focus event
HTML:
<div ng-controller="TestController" >
<form name="test_form" ng-submit="submit()">
<input type="text" name="some_name" ng-model="form_data.some_name" required>
<ng-form ng-repeat="key in keys" name="keyForm">
<input type="text" name="data_input" ng-model="form_data.data_input" required>
</ng-form>
<a ng-click="addKey()">NEW KEY</a>
</form>
</div>
JS:
app.controller('TestController', function TestController($scope){
$scope.keys = [];
$scope.addKey = function() {
$scope.keys.push({});
}
$scope.submit = function() {
console.log($scope);
}
});
In submit function I can get the value of "some_name" input:
$scope.submit = function() {
console.log($scope.form_data.some_name);
}
But I can't get the values of "data_input" inputs (they are inside ngform tag). How to do that?
(ngform tag is using for ability to validate each new added input separately)
Each input inside the ng-repeat needs its own unique ng-model property -- they all can't use form_data.data_input. Here is one way to solve your problem:
<ng-form ng-repeat="key in keys" name="keyForm">
<input type="text" name="data_input" ng-model="key.data" required>
</ng-form>
$scope.addKey = function () {
$scope.keys.push({ data: ''});
}
Fiddle.
See also https://stackoverflow.com/a/14379763/215945
I searched and tried many ng-xxxx kind of options but couldn't find the one..
I just want to call some function in the controller when radio button is selected.
So it might be similar to following..(Of course, below code is not working)
<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>
Is there any way to achieve what I want?
There are at least 2 different methods of invoking functions on radio button selection:
1) Using ng-change directive:
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
and then, in a controller:
$scope.newValue = function(value) {
console.log(value);
}
Here is the jsFiddle: http://jsfiddle.net/ZPcSe/5/
2) Watching the model for changes. This doesn't require anything special on the input level:
<input type="radio" ng-model="value" value="foo">
but in a controller one would have:
$scope.$watch('value', function(value) {
console.log(value);
});
And the jsFiddle: http://jsfiddle.net/vDTRp/2/
Knowing more about your the use case would help to propose an adequate solution.
Should use ngChange instead of ngClick if trigger source is not from click.
Is the below what you want ? what exactly doesn't work in your case ?
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.value = "none" ;
$scope.isChecked = false;
$scope.checkStuff = function () {
$scope.isChecked = !$scope.isChecked;
}
}
<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="one" ng-change="checkStuff()" />
<span> {{value}} isCheck:{{isChecked}} </span>
</div>
In newer versions of angular (I'm using 1.3) you can basically set the model and the value and the double binding do all the work this example works like a charm:
angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<html>
<body ng-app="radioExample">
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="color.name" value="red"> Red <br/>
<input type="radio" ng-model="color.name" value="green"> Green <br/>
<input type="radio" ng-model="color.name" value="blue"> Blue <br/>
<tt>color = {{color.name}}</tt><br/>
</form>
</body>
</html>
For dynamic values!
<div class="col-md-4" ng-repeat="(k, v) in tiposAcesso">
<label class="control-label">
<input type="radio" name="tipoAcesso" ng-model="userLogin.tipoAcesso" value="{{k}}" ng-change="changeTipoAcesso(k)" />
<span ng-bind="v"></span>
</label>
</div>
in controller
$scope.changeTipoAcesso = function(value) {
console.log(value);
};
Another approach is using Object.defineProperty to set valueas a getter setter property in the controller scope, then each change on the value property will trigger a function specified in the setter:
The HTML file:
<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>
The javascript file:
var _value = null;
Object.defineProperty($scope, 'value', {
get: function () {
return _value;
},
set: function (value) {
_value = value;
someFunction();
}
});
see this plunker for the implementation
i prefer to use ng-value with ng-if,
[ng-value] will handle trigger changes
<input type="radio" name="isStudent" ng-model="isStudent" ng-value="true" />
//to show and hide input by removing it from the DOM, that's make me secure from malicious data
<input type="text" ng-if="isStudent" name="textForStudent" ng-model="job">
<form name="myForm" ng-submit="submitForm()">
<label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
<div>currently selected: {{radioValue}}</div>
<button type="submit">Submit</button>
</form>