I have simple test page
<head>
........
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/angular/angular.js"></script>
</head>
<body>
.......
<label>Name:</label>
<input type="text" ng-model="name" placeholder="Enter name">
<h1>Welcome {{name}}!</h1>
</body>
When page loads first time I see {{name}} on page
After a half of a second it disappears
that makes quite annoying effect of blinking. What am I missing and how can I avoid it?
You can use ngCloak to prevent this behavior.
Related
I have a simple form.
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And i have angular controller
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
Why do I get error '$scope.myForm is undefined'?
You have model, module and controller a little confused. My solutions uses Angular 1.2, although you will soon need to move to Angular 2.
Here is my reworking of your example:
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl as ctrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="ctrl.myField" name="myField" />
<div style="color: red">
{{ctrl.myField}}
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script src="controller.js"></script>
</body>
</html>
And in the controller.js:
angular.module('MyApp',[])
.controller('AppCtrl', [function() {
this.myField = "just to see it work";
}]);
In the above, I have put "myField" in the scope of the controller "AppCtrl". I have put the whole page under the control of the module 'MyApp'. You can either inject the model with "ng-bind" or use the curly bracket notation in the body of the div to bind to the "myField" model of "ctrl". I have used the latter but be aware this binding will be established after the page has been parsed.
If you load this all now, you should see "just see it work" in red under the text field, and also inside the text field. When you edit the text box, the red text will change in sync. Once you have that working, you will never want to stop learning more about Angular!
I should add that this model has a single attribute. To generalise this you will need to create a model with several properties (one for each input element), so that a JSON object is returned when the form is submitted.
You can't have dots in your variable name.
Try myFormMyFieldError instead of myForm.myField.$error.
Additional: Rather than using the attribute style, use a CSS file.
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.
I'm trying to use Angular Agility for form validation. I'm trying to get a simple example working with the correct error messages and colours outlining the form element. So far I'm not getting very far. I've had a look at the demo examples but there's no clear code examples, unless I'm doing something drastically wrong.
Can anyone show me an example of how to use this properly?
For example how would I be able to get the following html to show the error message and the validation outline around the form element?
From the documentation?
<div ng-form="exampleForm" class="form-horizontal">
<input type="number" aa-field-group="person.age" min="0" max="140" required>
</div>
Thanks in advance.
Assuming you have the angular.js and angular-agility.js, here is a working sample
<!Doctype html>
<head>
<link href="https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/aa.formExtensionsOptional.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div ng-app="angularAgilitySimpleExample" ng-controller="indexCtrl">
<div ng-form="exampleForm">
<input type="number" aa-field-group="person.age" min="0" max="140" required>
</div>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-agility.js"></script>
<script type="text/javascript">
angular.module('angularAgilitySimpleExample', ['aa.formExtensions', 'aa.notify']);
</script>
</body>
</html>
Incase, you do not see the styling, please download the css from https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/aa.formExtensionsOptional.css and use it locally
You can find the complete example from angular-agility team https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/index.html
This plnkr shows how to validate the firstname, show the error message and show green/red outline round the form element:
http://plnkr.co/edit/V4vDiu?p=preview
<!DOCTYPE html>
<html ng-app="exampleModule">
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://code.angularjs.org/1.2.8/angular.js"></script>
<script src="aa.formExtensions.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="exampleController" ng-form="exampleForm">
<div>
<input type="text" required="" ng-minlength="2" ng-maxlength="30"
aa-auto-field="firstName" />
</div>
<button aa-save-form="save()">Save</button>
</div>
</body>
</html>
I'm using tooltips for the error explanation and coloring to indicate errors. On my datepicker fields, I have some validations about date range that I need to show. However if I try to put the datepicker and the tooltip on the same input element I get
Multiple directives [datepickerPopup, tooltipHtmlUnsafe] asking for new/isolated scope on: <input
This wasn't a problem until I "upgraded" to angular-bootstrap from the old version that used the bootstrapjs code to deal with the tooltips.
Is there some easy way I can use the focus on the datepicker input to cause the tooltip to pop, even when the input field can't get the tooltip directive?
Right now I have it as a hover on the label which is about as obvious as a subliminal message on your TV.
I have a field directive with an isolate scope that covers the input and the label associated with it, so that is the kind of context I have to work with.
Yes, there is a work around, but it's just that: a workaround. This is a known issue with AngularUI.
The solution is to wrap your input in another element and place the tooltip directive on the wrapping element like so:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="DatepickerDemoCtrl" style="padding-top:40px">
<span tooltip="Set date">
<input type="text" class="form-control" ng-click="opened = !opened" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" datepicker-options="dateOptions" />
</span>
</body>
</html>
This may not work in all cases, but will work in most.
I have begun with the code from angular-seed, and am slowly changing it. My goal is to make a simple spreadsheet application. In angular-seed/app/index.html I added the following code to begin with:
<input type="text" ng-model="KID" placeholder="ID goes here">
<input type="text" ng-model="DESC" placeholder="Description goes here">
<input type="text" ng-model="DDD" placeholder="Drop Dead Date goes here">
That did what I wanted, but I thought I would try to take what I have learned from the John Lindquist tutorial and apply it. So I changed the above:
<span ng-repeat="entryField in entryFields">
<input type="text" ng-model="entryField.ngmodel" placeholder="entryField.pHolder">
</span>
and I added the following controller to angular-seed/app/js/controllers.js
function DataEntryCtrl($scope) {
$scope.entryFields = [
{pHolder:'ID goes here',ngmodel:'KID'},
{pHolder:'Description goes here',ngmodel:'DESC'},
{pHolder:'Drop Dead Date goes here',ngmodel:'DDD'}
];
}
And now I only get one text field with the literal string entryField.pHolder. I first suspected I wasn't using the right syntax for the ng-model element. I'm following the pattern from the tutorial, so I am confident that is correct. Then, I made sure I closed the <span> properly, and I believe that checks out. I'm new to not only angular-js, but javascript as well (plus only passingly familiar with html), so I suspect this is where the problem lies. I'm not sure how to pin-point the problem. Is it glaring? Could someone point out what I've done wrong? Below is the entire index.html for reference.
<!doctype html5>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>SpreedSheet Demo</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div ng-controller="DataEntryCtrl">
<span ng-repeat="entryField in entryFields">
<input type="text" ng-model="entryField.ngmodel" placeholder="entryField.pHolder">
</span>
<div ng-view></div>
</div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
You should replace this:
placeholder="entryField.pHolder"
with:
placeholder="{{entryField.pHolder}}"
I am not sure what do you use the tag "ng-model" for in this case.
But it should work then.