I'm new to angularjs and besides working on a project using angularjs I'm learning it as well. The query which I have, is relevant to the following code:-
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
Name:<input ng-model="name" type="text"/>
<br>
Name:<input ng-model="name" type="text"/>
<br>
Name:<input ng-model="name" type="text"/>
<br>
Hello {{name}}
</body>
</html>
In this code, there are ngModel directives with every input control and when I type in any one of the input control the value of other two input controls also update. I know ngModel directive binds input, select and textarea with property and changes in any of the control are detected in {{expression}} observing directive. But here I didn't see any {{expression}} observing directive in input controls. So, how the values in input controls are updated.
Can anybody shed some light on this?
I tried your code, it works in plunker. The "Hello ..." gets updated per character I type : http://plnkr.co/edit/U9IpmKNALfpAqNNhoTHa?p=preview
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
Name:
<input ng-model="name" type="text" />
<br>Name:
<input ng-model="name" type="text" />
<br>Name:
<input ng-model="name" type="text" />
<br>Hello {{name}}
</body>
</html>
Related
Is there an easy way to have input[number] directive accept a blank value?
I basically need to an input that accepts 1 - 100 but also a blank value. Hoping there's an easy way to do it without making a custom validator just for this.
https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D this is the built in Angular directive.
inputs by default allow empty values (given required and ng-required are not set):
<input type="number" min="1" max="100" ng-model="val">
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
</head>
<body ng-app>
<form name="f">
<input type="number" min="1" max="100" ng-model="val" name="in">
<b>val:</b> '{{val}}' <b>valid:</b> {{f.in.$valid}}
<button ng-click="val = ''">Clear</button>
</form>
</body>
</html>
I am 100% new to AngularJS, and I am trying to set a condition for displaying a String. If the text the user enters starts with the letter a, it should display Hello {{name}}, welcome back! (where {{name}} binds to the name entered), otherwise the text should not appear. My code is as follows:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Type Your Name</title>
</head>
<body>
Please type your name:
<br />
<table><input type="text" data-ng-model="name" />
</br>
Hello {{name}}, welcome back!
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js">
</script>
</body>
</html>
You should use a ng-if and check if the first character is the letter a.
<div ng-app>
<input type="text" data-ng-model="name" />
<span ng-if="name.charAt(0) === 'a'">Hello {{name}}, welcome back!</span>
</div>
Fiddle here.
Do not use ng-show because it always renders the DOM element and hides it if conditions are not met, ng-if renders the DOM element if and only if the condition is met.
How can I display an error message for a form input with a name like data[Foo][bar]?
<input type="text" name="data[Foo][bar]" ng-model="data.Foo.bar" ng-maxlength="3"/>
<!-- both dont work for me -->
<small ng-show="testForm.['data[Foo][bar]'].$error.maxlength">Max 3 chars characters</small>
<small ng-show="testForm.data[Foo][bar].$error.maxlength">Max 3 chars characters</small>
Or is there maybe any other way to map the field to the rule?
Demo
<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
<form name="testForm" novalidate>
data[ContactMethod][0][value]
<input type="text" name="data[ContactMethod][0][value]" ng-model="data.Foo.bar" ng-maxlength="3"/>
<small ng-show="testForm.['data[ContactMethod][0][value]'].$error.maxlength">More than 3 characters!</small>
</form>
</body>
</html>
You can try with:
testForm['data[Foo][bar]']
This is a really simple example:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js" data-require="angular.js#1.2.x"></script>
</head>
<body>
<form name="myForm">
<div>
<input type="number" name="number" ng-model="num" ng-pattern="/^\d+$/"/>
<br>error: {{ myForm.number.$error }}
</div>
<div>
<input type="text" name="text" ng-model="text" ng-pattern="/^\d+$/"/>
<br>error: {{ myForm.text.$error }}
</div>
</form>
<script type="text/javascript" charset="utf-8">
angular.module('myApp', []);
</script>
</body>
</html>
Here is the plunker
With both using the same ng-pattern, only the one with input type text work. Am I missing something here?
The HTML5's number type is not currently supported by AngularJS. If you put required directive in the input control, the validation will be triggered, and you can get the status from myForm.number.$valid. Hope it helps.
I'm just getting started with angularjs and noticed that forms within a ng-app directive won't submit. Any ideas of how I can make the form submit?
<!DOCTYPE html>
<html ng-app>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
<input type="text" name="foo" />
<input type="submit" value="Submit" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</body>
</html>
According to the documentation :
Angular prevents the default action (form submission to the server) unless the <form> element has an action attribute specified.