I am working through Pro AngularJS by Adam Freeman and have not been able to get the Using Checkboxes example to work.
The example tries to show that you can set attributes ng-true-value="Hurrah!" and ng-false-value="Boo!" and are displayed through ng-model="inputValue".
This is not working.
I am only able to get this sample to work by setting integer values inside ng-true-value and ng-false-value.
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Forms</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {});
</script>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
<form name="myForm" novalidate>
<div class="well">
<div class="checkbox">
<label>
<input name="sample" type="checkbox" ng-model="inputValue"
ng-true-value="Hurrah!" ng-false-value="Boo!">
This is a checkbox
</label>
</div>
</div>
<div class="well">
<p>Model Value: {{inputValue}}</p>
</div>
</form>
</div>
</body>
</html>
According to the documentation for input[checkbox], ng-true-value and ng-false-value accept expressions. Since you are trying to pass a string literal as the value, you need to enclose them in an addional pair of quotes.
Try ng-true-value="'Hurrah!'" ng-false-value="'Boo!'"
Related
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
I'm trying to use the Angular Materials snippet for a form input field with ng-messages for displaying error messages.
When I clear and fill this field multiple times, it somehow stores the 'old' error messages, showing x times 'Address is mandatory'.
If I remove the element outside the md-input-container, it works fine (but I want the ng-messages inside the md-input-container obv).
<div layout-gt-sm="row" ng-show="showAddress">
<md-input-container class="md-block" flex-gt-sm="">
<md-icon md-font-library="material-icons">home</md-icon>
<label>Adres</label>
<input ng-model="address" name="address" required />
<div ng-messages="orderForm.address.$error" role="alert">
<div ng-message="required">Address is mandatory</div>
</div>
</md-input-container>
</div>
Update:
Ok I was using an older version of Angular and Angular-Animate (1.3.15).
Updating this resulted in the fix.
First check if you have ngMessages injected in your module again, second you can check if you have a form with the name 'orderForm' and last you must check if your ng-model has a controller or something where you have the data.
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style type="text/css">
</style>
</head>
<body ng-app="testApp" ng-controller="AppCtrl">
<form name="orderForm">
<div layout-gt-sm="row" >
<md-input-container class="md-block" flex-gt-sm="">
<label>Address</label>
<input ng-model="address" name="address" required />
<div ng-messages="orderForm.address.$error" role="alert">
<div ng-message="required">Address is mandatory</div>
</div>
</md-input-container>
</div>
</form>
<script type="text/javascript">
var app = angular.module("testApp", ["ngMaterial","ngMessages"])
.controller('AppCtrl', function($scope) {
$scope.address = 'Prueba';
});
</script>
</body>
</html>
Had the same issue, installing ngMessages into your app resolved this issue for me.
I am new to angular.js and I was trying my hands on it. Can anyone please tell me why this program is not running?
HTML code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link data-require="bootstrap#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script data-require="jquery#>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="SimpleController">
Name:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="cust in customers | filter:name"></li>
</ul>
</div>
</body>
</html>
JS code:
// Code goes here
var demoApp = angular.module ('demoApp', []);
function SimpleController($scope){
$scope.customers=[
{name:'xx xx' city:'xx'},
{name:'yy yy' city:'yy'},
{name:'zz zz' city:'zz'}
];
}
demoApp.controller('SimpleController', SimpleController);
You have several errors in you sample:
The main problem is that you're using the Angular 1.x.x syntax while you have the Angular 2.x.x script included in your app. Change the script for the previous release of the framework.
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js" data-semver="1.4.8"></script>
The customers object is not a valid JSON as separation commas between properties are missing. It should look like this:
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
You don't show anything using ng-repeat directive, you simply create several empty <li> tags, hence there's no content inside them. You need to display the variable that you iterate. If you want to show only the name property of the object, use simple dot syntax.
<li ng-repeat="cust in customers">{{cust.name}}</li>
Your input filed has ng-model attached, but you don't use the variable that is bound to it. You can refer to the variable with {{name}}.
Name: {{name}}<br/>
<input type="text" ng-model="name"/>
To see the big picture, here's the fixed sample.
Please refer to below code
HTML
<h1>Hello Plunker!</h1>
<div ng-controller="SimpleController">
Name: <br/>
<input type="text" ng-model="name"/>
<br/>
<ul>
<li ng-repeat="cust in customers| filter:name">{{cust}}</li>
</ul>
</div>
Angular
var demoApp = angular.module ('demoApp', []);
function SimpleController($scope){
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
}
demoApp.controller('SimpleController', SimpleController);
Please refer
Problem
$scope.customers is not a valid object(missing commas between properties).
You have not displayed anything inside ng-repeat. Please use {{cust}}. Please refer ng-repeat.
The scripts inside your plunker are wrong.
Here is the fiddle demo.
js
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
html
<li ng-repeat="cust in customers | filter:name">
{{ cust.name }}
</li>
hope this will help you
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 have to finish this assignment. I am trying to print out the contacts in contactsController and be able to add to this list. I can't figure out where I am going wrong. Can anyone help. I have an array contacts[] in contactController and I am trying to print out the list in html using ng-repeat="contact in contactsController.contacts" and binding to contact.name and contact.type.
<!doctype html>
<html ng-app>
<head>
<style>
</style>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="contactsController">
<label>Name</label>
<input ng-model="contactsController.contacts.name" type="text" placeholder="Name">
<label>email</label>
<input ng-model="contactsController.email" type="text" placeholder="Email">
<button ng-click="addContact()">Add contact</button>
</div>
<div>{{contactsController.name}}</div>
<div>
<ul>
<li ng-repeat="contact in contactsController.contacts">
<div>{{contact.name}}</div>
<div>{{contact.email}}</div>
<div><button ng-click="deleteContact($index)">delete</button></div>
</li>
</ul>
</div>
<script>
// Your code goes here.
// $( document ).ready(function() {
// alert('jQuery asdfas!');
// Your code here.
// });
function contactsController($scope){
$scope.contacts=[{name:'asdf',email:'asdf'},
{name:'yweuir',email:'xcvzx'}
];
contactsController.prototype.addContact =function($scope){
console.log(this.name);
console.log(this.email);
this.contacts.push({name:this.name,email:this.email});
}
}
</script>
</body>
</html>
Your repeat is wrong. It should be:
ng-repeat="contact in contacts"
When you are doing a repeat, the reference to the array assumes it's in $scope already. Your controller has nothing to do with it. So if you had:
$scope.contractsController = {
contacts: {...}
}
Your code would work. But your controller is fine, just remove the reference from the repeat.
I'll create a plunker so you can check the detail changes in the revisions.
http://plnkr.co/edit/NrbLiIFw4EbxEfYJm41J?p=preview
The HTML had a wrong indentation, and the ng-repeat was outside of the ng-controller block.
Also, was missing the injection of the controller into the module of the application, i rewrote the application using the general application declaration with ngApp directive.
If you want an example more detailed you can check the TodoMVC angular application
https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs-perf
Other examples:
http://todomvc.com/architecture-examples/angularjs/#/
All the best
Hey I'll create a plnkr link.
Here is link Check this:
http://plnkr.co/edit/mzcAC5yU9P6Mb3nfGByP?p=preview
Here is Code:
<!DOCTYPE html>
<html ng-app = "app">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js">
</script>
<script>
angular.module("app",[]).controller('contactsController',['$scope',
function($scope) {
$scope.contacts=[{name:'Abhi',email:'Abhi#test.com'},
{name:'Sharma',email:'sharma#test.com'}
];
$scope.addContact =function(){
this.contacts.push({name:this.name,email:this.email});
$scope.name = '';
$scope.email = '';
}
$scope.deleteContact = function (index) {
$scope.contacts.splice(index, 1);
}
}
]);
</script>
</head>
<body ng-controller="contactsController">
<label>Name</label>
<input ng-model="name" type="text" placeholder="Name">
<label>email</label>
<input ng-model="email" type="text" placeholder="Email">
<button ng-click="addContact()">Add contact</button>
<div>
<ul>
<li ng-repeat="contact in contacts">
<div>{{contact.name}}</div>
<div>{{contact.email}}</div>
<div><button ng-click="deleteContact($index)">delete</button></div>
</li>
</ul>
</div>
</body>
</html>
May be it help you..
Thanks
You don't prefix your values with the controller name. The ng-controller section basically sets the scope for the child elements to an instance of the controller. So what's happening in your code currently is that it's checking the contactsController for an attribute of contactsController.