Hi I have following situation
I have following html Wh
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="c.num" on-blur="test()" />
<input type="text" ng-model="c.Id" ng-init="c.Id = pId" />
</body>
On my controller I have
$scope.test=function() {
$scope.pId = $scope.num+1;
};
So that when 5 is entered in first box the second box should update 6. But it doesnt.
Please let me know how to fix it. Thanks
Here is the plunker for it
http://plnkr.co/edit/9QoMwsjUBl8CNAFgtYcj?p=preview
Working fiddle
I removed the ng-init, no need for it.
Referenced the right variable.
Changed input type to number (then no need to parseInt). Else you would get 5+1 = 51.
$scope.test=function() {
$scope.c.Id = $scope.c.num + 1;
};
Your updated plunker
Please check if the first ng-model is correct. I think you want this:
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="num" on-blur="test()" />
<input type="text" ng-model="c.Id" ng-init="c.Id = pId" />
</body>
By looking at your code, I am unsure what the object 'c' is or where it is instantiated. I also do not think you are using ng-init properly. In the documentation below, it suggests only using it in scopes that are otherwise unavailable in the angular context (e.g. ng-repeats).
What about changing your html to
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="num" ng-blur="test()" />
<input type="text" ng-model="pId" />
</body>
and keeping your javascript the same.
Edit:
Angular documentation https://docs.angularjs.org/api/ng/directive/ngInit
ng-blur is the way to go here:
markup:
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter value" ng-model="num" ng-blur="test()" />
<input type="text" ng-model="pId" />
</body>
controller
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.c = {};
$scope.test = function() {
$scope.pId = parseInt($scope.num) + 1;
};
});
Related
Javascript focus is not working in my code.
HTML
<div class="col-md-6" style="border:none; margin-top:2px; padding-right:5px">
<input type="text" id="edtunt" ng-model="Unit" class="form-control" placeholder="Edit Unit" />
</div>
Javascript
var textbox = document.getElementById('edtunt');
//document.getElementById("edtunt").focus();
document.getElementById("edtunt").focus();
$scope.Unit = unit.name;
use tabindex="0" for making div focusable
Your code works:
document.getElementById('edtunt').focus();
<div class="col-md-6">
<input
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
Also, within your AngularJS application, you can add the autofocus attribute:
angular
.module('MyApp', [])
.controller('MyController', function() {});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="col-md-6">
<input
autofocus
type="text"
id="edtunt"
ng-model="Unit"
class="form-control"
placeholder="Edit Unit">
</div>
</div>
Indeed your code should work. Just a question, why you do:
var textbox = document.getElementById('edtunt');
document.getElementById("edtunt").focus();
Instead of:
var textbox = document.getElementById('edtunt');
textbox.focus();
What worked for me is making sure the whole document is loaded before setting focus. A very easy way to do that is using this copy paste JQuery code:
$( document ).ready(function() {
var textbox = document.getElementById('edtunt');
textbox.focus();
});
Hope this might help!
I am making a simple validation of required, but unable to find ng-Message working on wrong entry or on clicking submit. Can someone help me out where am I wrong?
HTML:
<html>
<head>
<!-- Script Files -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="form1" id="form1" novalidate>
<input type="text" name="age" ng-minlength="3" required/>
<div ng-messages="form1.age.$error" ng-show="(form1.age.$error.required || form1.age.$error.minlength) && (form1.age.$touched || form1.$submitted) " >
<div ng-message="required">This is required</div>
<div ng-message="minlength">Length is too less</div>
</div>
<a data-ng-click="submit(form1.$invalid)">Click</a>
</form>
<script>
//module declaration
var app = angular.module('myApp', ['ngMessages']);
//controller declaration
app.controller('myCtrl', function($scope) {
var submit = function(invalid){
if(invalid) return;
}
});
</script>
</body>
</html>
Your age input has no ng-model. Validation alá minlength only works if ng-model is present:
<input type="text" name="age" ng-model="age" ng-minlength="3" required/>
This is due to how validators work. You'll notice ng-model is not set, when $valid is false. There's always a hint in the docs as well: https://docs.angularjs.org/api/ng/directive/ngMinlength
Also ng-model doesn't need to be the same as the field name.
I have a variable set on $scope $scope.some_val that I want to update on form submission depending on whether a checkbox is checked or not.
I want to hold on to the original value some_val but only update it when user clicks submit.
I tried:
ng-model="some_model.some_val" ng-true-value="new_val" ng-false-value="{{ some_model.some_val }}"
Because I want the original value preserved but this didn't work.
How can I do this?
It seems that Angular does not accept non-constant expressions in the ng-true-value and ng-false-value attributes, as stated in this doc.
What I would invite you to try is to simply hardcode the default value in a regular JavaScript variable, in the controller behind the form. On user submit, just check if the checkbox has been checked and if so - update the value. If not - reassign it to the hardcoded JS var.
Below is the working code and here is a plunker.
// Code goes here
var app = angular.module('app', []);
app.controller('controller', function($scope){
var origin_value = 'original value';
$scope.some_val = origin_value;
$scope.submit = function(input){
if(input.checkbox)
$scope.some_val = input.text;
else
$scope.some_val = origin_value;
};
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="controller">
<code>{{some_val}}</code>
<form novalidate>
<input ng-model="input.text" name="input" type="text" /><br/>
Update some_val? <input type="checkbox" value="checked" ng-model="input.checkbox" name="checkbox" required="" /><br/>
<input type="submit" ng-click="submit(input)" value="save"/>
</form>
</body>
</html>
Thank you and have a nice day!
I was trying to check whenever my form is being edited by writing some fields of it. I read $dirty should work for that task but I can't figure out what I'm missing here:
<!DOCTYPE html>
<html lang="en">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form name = "myForm" novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p> is Form dirty? {{isDirty}}<p>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.isDirty = $scope.myForm.$dirty;
});
</script>
</body>
</html>
I'm trying to make the flag isDirty to true whenever the user modifies the form. Thanks
You are missing name attributes in your form fields which are not enabling form validation for those field. You need to add unique name for each field so that it will get add those field in myForm object
Markup
<form name="myForm" novalidate>
First Name:<br>
<input type="text" name="firstName" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" name="lastName" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
Also you are accessing myForm object which is nothing but form object, I won't be available until DOM get rendered, $scope.myForm will be simply undefined at the time of controller initilization, If you really want to access $scope.myForm from controller then you need to put that code in $timeout that will run $timeout function code in next digest cycle.
$timeout(function(){
$scope.isDirty = $scope.myForm.$dirty;
});
Update
There is no need to maintain a separate isDirty flag (this would require to change the separate isDirty flag to reflect any changes in myForm.$dirty flag.) Instead I suggest you use $scope.myForm.$dirty directly as a flag. So use the expression myForm.$dirty, and this flag will change as form gets dirty.
Working Plunkr
I am using angular js version 1.2.
Basically i am creating object in server based on screen to do this i need to pass to server
how can i convert a 'div' onload of screen to json using angularjs?
html looks likes this:
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" />
<input ng-model="user.lastName" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
js :
function MyCtrl($scope) {
$scope.user = { };
}
jsfiddele: http://jsfiddle.net/bpbhat777/2grw1je0/
i want it to be like this
http://jsfiddle.net/bpbhat777/dbg2u5ck/
without setting firstname and lastName .It need not to be firstname and lastName , in screen ng-model may be any object
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" ng-init="user.firstName=''" />
<input ng-model="user.lastName" ng-init="user.lastName=''" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
and remove $scope.user = { }; from controller
WITHOUT ng-init
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" />
<input ng-model="user.lastName"/>
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
function MyCtrl($scope) {
$scope.user = {firstName:'',lastName:''};
}
i don't have any idea what the use of it. but if you really need that ng-init might be the option
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" ng-init="user.firstName=''" />
<input ng-model="user.lastName" ng-init="user.lastName=''" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>{{user | json}}
check the demo fiddle
You are looking for angular.toJson()
https://docs.angularjs.org/api/ng/function/angular.toJson
There are several ways to update $scope on page load. I personally prefer to use init():
$scope.init = function() {
$scope.json = angular.toJson($scope.user);
}
$scope.init();
Fiddle: http://jsfiddle.net/dbg2u5ck/2/
After reading and re-reading your question, it seems to me you want to populate the $scope with pre-loaded html values (an empty string in your case). This is not the way Angular works, please take the time to read this article if you want to populate $scope with html values: Angular js init ng-model from default values