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.
Related
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.
I just start working on Angularjs, and when I came to ng-controller, there is one confusing point as following:
The HTML codes:
<html lang="en" ng-app="App" ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h2>Chapter1 <small>Hello,World</small></h2>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name}}</h1>
<label for="name">Enter Your Name</label>
<input type="text" ng-model="name" class="form-control input-lg" id="name">
</div>
</div>
</body>
</html>
The angularjs codes:
function AppCtrl($scope){
$scope.name = "World";
});
the result is that the {{name}} model part can not get the correct data. No default data "World" can be shown, and no matter what I type inside the input text box, the output view is always Hello, {{name}}
EDIT: I refer to a book about angularjs. And the demo case shows that the usage I post here. But I found workaround now.
Your Angular is not bootstrapped. Use:
angular.module('App', [])
.controller('AppCtrl', function($scope) {
$scope.name = "World";
});
I suggest you to read through some basic tutorials first.
Check this working demo: JSFiddle
<html ng-app="notesapp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Edit
For making small code like this work, we can actually define an empty ng-app.
Eg: <html ng-app = "">
If you however want to define ng-app with some value, we need to load that ng-app in javascript. It can be done in a separate js file or in the same html file with <script></script> tag. Please see below:
<script>
var app = angular.module('notesapp', []);
</script>
Please close the script tag in your head. Also angular needs ng-app for its functioning. Please use ng-app on the tag which encloses your angular content.
<html ng-app="notesapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<script>
var app = angular.module('notesapp', []);
</script>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Also, as you know, Sublime is just an editor. It has nothing to do with angular. Cheers.
Today is the first when i started reading about Angular JS and I tried to do a very basic thing after reading from a tutorial.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body>
Name:
<br />
<input type="text" data-ng-app="name" /> {{ name }}
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>
I downloaded and added the angular js library from GitHUB 1.4.x(latest). I expect the name to be written on the fly when user types in the textbox but nothing happens. What am i missing for this basic set up ?
P.S. - I am using an HTML page in Visual Studio 2010.
Some minor adjustments to your code, and it works just fine:
<html ng-app="">
<head>
<title></title>
</head>
<body>
Name:
<br />
<input type="text" ng-model="name" /> {{ name }}
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>
A working code pen can be seen here: http://codepen.io/anon/pen/jPWyaR
JSFIDDLE http://jsfiddle.net/seadonk/aze39fjq/
change the html tag to: <html ng-app>
change your input directive to data-ng-model="name"
<html ng-app>
<head>
</head>
<body>
Name:
<br />
<input type="text" data-ng-model="name" /> {{ name }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
I note a few things.
a) No reference to script file which should contain an angular module declaration.
b) The input references an angular app named "name" but it is immediately closed
c) No controller declared
d) data-ng-app needs older version of angular. I suggest use 1.3.5
I will do the following corrections to get it working.
http://plnkr.co/edit/rfXgNl6ugqSmlwXOaHIN?p=preview
<!DOCTYPE html>
<html >
<head>
<title>
My First Angular App
</title>
<script src="https://code.angularjs.org/1.3.15/angular.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('name', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</head>
<body ng-app="name">
Name:
<br />
<div ng-controller="MainCtrl">
<input type="text" ng-model="name"/>
{{name}}
</div>
</body>
</html>
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>