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
Related
I just started AngularJS today; so I'm still very new to it. I have the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">
<div class="container">
<h3>Looping with the ng-repeat Directive</h3>
<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}
When I run the above code, this is what I get:
when I remove the controller directive from the body tag, I get this:
I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!
Try to register controller in angularjs app using build in dependency injection, in other words:
<script type="text/javascript">
var app = angular.module("app", []);
app.controller('SimpleController', ['$scope', function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}]);
</script>
then change ng-app to ng-app="app".
Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output
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
How can I create dynamic ng-models in Angular? I tried but I think I'm having a hard time getting it to run. All I get is undefined. Here's my code.
<input type="text" class="form-control input-sm" ng model="teller[value.teller_id]" value="<% value.mac_address %>">
I am planning to have a ng-model that has the same name but only changes by number. I have an object that holds the number from 1-4. which is value.teller_id. I want to append it to the ng-model as teller1,teller2,teller3 (teller[value.teller_id] etc.. It is looped by ng-repeat which I don't have any problem but rather creating the dynamic ng-model and changing the number will yield undefine.
ng model="teller[value.teller_id]" <---- doesn't work
I want to achive teller1, teller2 etc..
Thanks!
Yes. We can generate ng-model name dynamically.
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.teller = {};
$scope.name = [{
"id":1
},{
"id":2
}]
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="x in name">
<input type="text" ng-model="teller[x.id]" />
</div>
<pre>{{teller | json}}</pre>
</body>
</html>
Hope it works for your case :)
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.
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!'"