Given an input with ngModel, how can i get the viewValue inside ngChange function?
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, 'my object property')" />
I have tried:
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, getMyObject().value)" />
But return undefined.
Check this example and verify your code:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.list = [1, 5, 7];
$scope.myObj = {value: 10};
$scope.getMyObject = function() {
return $scope.myObj;
}
$scope.insert = function(pos, value) {
$scope.list.push(value);
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, getMyObject().value)" />
<br>
<pre>myObj = {{myObj|json}}</pre>
<pre>list = {{list|json}}</pre>
</body>
</html>
The property name to which is bound your ng-model directive must be accessible: it has to be referred to an object in the scope.
Related
I am trying to populate input by typing the number in input[number].
Why this doesn't work
// Code goes here
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.lengInput = {
count: 0,
values: [],
fill: function(limit) {
var sequence = [];
for (var i = 0; i < limit; i++) {
sequence.push(i);
}
return sequence;
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input ng-model="lengInput.count" type="number" min="1" max="20">
<ul>
<li ng-repeat="i in lengInput.fillSequence(lengInput.count)">
<input ng-model="lengInput.values[i]" />
</li>
</ul>
</body>
</html>
since this is working
JSFiddle Demo
Please find my mistake.
Instead of attaching the function directly to the ng-repeat, you can use ng-init to intialize the $scope.lengInput.values and add an ng-change to the input field where $scope.lengInput.count is getting set, so that the function does not get run every time, instead it runs only when the value in the input box has changed!
// Code goes here
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.lengInput = {
count: 0,
values: [],
fill: function(limit) {
var sequence = [];
for (var i = 0; i < limit; i++) {
sequence.push(i);
}
$scope.lengInput.values = sequence;
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="lengInput.fill(lengInput.count)">
<p>Hello {{name}}!</p>
<input ng-model="lengInput.count" type="number" min="1" max="20" ng-change=" lengInput.fill(lengInput.count)">
<ul>
<li ng-repeat="i in lengInput.values">
<input ng-model="lengInput.values[i]" />
</li>
</ul>
</body>
</html>
I am trying to pass two regex variable regex1 and regex2 for email and mobile number into single ng-pattern by using "OR" condition but it is not working. if i pass a single variable at a time then it works perfectly. So what i have to do to pass two variable at a time into single ng-pattern directive.
please suggest solution..
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form>
</div>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
});
</script>
</body>
</html>
What you can do is create a function in which you can taken both regex and based on these regex return true and false and from ng-pattern call that function
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style> </head> <body> <div ng-controller="myCtrl"> <form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form> </div> <script src="https://code.angularjs.org/1.2.3/angular.min.js"></script> <script>
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/; });
$scope.runBothRegex = (function(){
return {
var value = $scope.user.udetail;
if(regex1.test(value) || regex2.test(value)){
return true;
}
return false;
}
})();
</script> </body> </html>
Is there a way to initialize the following form fields so the Angular code doesn't display "NaN" when the form is loaded? Having the value start at zero would be nice.
<input type="text" id="field1" value="0"/>
<input type="text" id="field2" value="0"/>
<br />
Total {{field1*50--field2}}
http://plnkr.co/edit/Cn0tCJlclIMXivli1is0?p=preview
You can use the ng-init directive. Here's the stuff copied from your plunker that works with it. But you should use this with caution, here's an excerpt from the documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
testing
<input type="text" id="field1" ng-model="field1" ng-init="field1 = 0"/>
<input type="text" id="field2" ng-model="field2" ng-init="field2 = 0"/>
<br />
Total {{field1*50--field2}}
</body>
</html>
So really, you should do this:
angular.module('app', [])
.controller('testCtrl', ['$scope',
function($scope) {
function init() {
$scope.field1 = 0;
$scope.field2 = 0;
}
init();
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
testing
<input type="text" id="field1" ng-model="field1" />
<input type="text" id="field2" ng-model="field2" />
<br />Total {{ field1 * 50 - -field2}}
</div>
</body>
</html>
You just add a controller to your HTML and assign a ng-model to your <input> fields and intialize it with some values in the controller instead of using value in <input>.
That's enough to have a default value for the fields
Here is the working plunker of your code,
http://embed.plnkr.co/Ssk1bP6LWq9YgAIDYaEk/preview
Hope this helps!!!!
This input value should be "Paris" but it does not display.
What is wrong with my code?
(function(angular, undefined) {
var mon_app = angular.module('mon_app', []);
angular.module('mon_app').controller('monctrl', function($scope) {})
}(window.angular));
<!DOCTYPE html>
<html class="app" ng-app="mon_app">
<head lang="fr" class="app">
</head>
<body>
<div ng-controller="monctrl">
This input value is "Paris"
<input name="lieu" ng-model="lieu" type="text" value="Paris" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>
You cannot mix regular HTML (the value attribute of your input) and the angular-driven ng-model. The input will always display the value of what's in ng-model, here lieu, hence you should iniialize $scope.lieu with the Paris value.
(function(angular, undefined) {
var mon_app = angular.module('mon_app', []);
angular.module('mon_app').controller('monctrl', function($scope) {
$scope.lieu = "Paname";
})
}(window.angular));
<!DOCTYPE html>
<html class="app" ng-app="mon_app">
<head lang="fr" class="app">
</head>
<body>
<div ng-controller="monctrl">
This input value is "{{lieu}}"
<input name="lieu" ng-model="lieu" type="text"/>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>
I am following YouTube's tutorial for Sharing Data between Controllers.
For some reason, the two inputs don't return shared data(not bind-able). Can anyone let me know what is wrong in my code?
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/css/app.css?2">
<script src="/bower-foundation/js/vendor/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?2"></script>
<!-- angularjs -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {msg:"I am data from a service"}
})
function firstctrl($scope, Data) {
$scope.data = Data;
}
function secondctrl($scope, Data) {
$scope.data = Data;
}
</script>
</head>
<body ng-app="myApp">
<div ng-controller="firstctrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<!-- javascript -->
<script src="/bower-foundation/js/foundation.min.js?3"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.11/fastclick.min.js?2"></script>
<script src="/js/min/app.min.js?3"></script>
</body>
</html>
Its working fine, Take a look at this
Working Demo
HTML
<div ng-app='myApp'>
<div ng-controller="firstctrl">
<input type="text" ng-model="data.msg" />
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.msg" />
<h1>{{data.msg}}</h1>
</div>
</div>
SCRIPT
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return {
msg: "I am data from a service"
};
})
function firstctrl($scope, Data) {
$scope.data = Data;
}
function secondctrl($scope, Data) {
$scope.data = Data;
}
Also take a look at this stuff
AngularJS - Sharing variables between controllers