What is wrong with my code? It has to show all the NAME, but it doesn't work well
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
DemoApp = angular.module("DemoApp", []);
DemoApp.controller('SimpleController', function ($scope) {
$scope.Customer = [{ Fname: 'Alireza', City: 'Tehran' }, { Fname: 'Ali', City: 'Tabriz' }, { Fname: 'Ehsan', City: 'Abadan'}];
});
DemoApp.controller();
</script>
</head>
<body data-ng-app="DemoApp">
<div data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cust in Customer">{{cust.Fname}}</li>
</ul>
</div>
</body>
</html>
Capitalization mismatch Fname != FName
http://jsfiddle.net/cdCqu/
HTML
<body data-ng-app="DemoApp">
<div data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cust in Customer">{{cust.Fname}}</li>
</ul>
</div>
</body>
JS
angular.module("DemoApp", []).controller('SimpleController', function ($scope) {
$scope.Customer = [{ Fname: 'Alireza', City: 'Tehran' }, { Fname: 'Ali', City: 'Tabriz' }, { Fname: 'Ehsan', City: 'Abadan'}];
});
try this jsFiddle , also you do not need data attribute as well as FName must be Fname , you donot need to append data with ng attributes
just remove data attribute
http://jsfiddle.net/imsaurabh/K6qwQ/
Related
The title may be a bit confusing. Please take a look at the code below,
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="test"><br/>
<div ng-repeat="x in names | filter:test"> {{ x }}</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
</body>
</html>
with these codes i can search for a name from scope.names. But the problem is, i don't want to hide other results while searching for a particular name. Which means, when i search "Gustav", it should be on top of the list without hiding other names. It would be more great if names were sorted by the matching of supplied keyword. Please help in this.
OrderBy is one of the options for the desired effect:
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="test"><br/>
<div ng-repeat="x in names | orderBy:customOrdering"> {{ x }}</div>
{{ log }}
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.test = "";
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
$scope.customOrdering = function(a) {
return a.indexOf($scope.test) == -1;
//return a.toUpperCase().indexOf($scope.test.toUpperCase()) == -1;
// use that for case insensitive search
}
});
</script>
</body>
</html>
I am very novice learning Angular js . I am following a video tutorials and made the following example. This doesn't show any output. can annyone let me know what am I missing.
<!DOCTYPE html>
<html >
<head>
<title>Directives with Databinding</title>
<meta charset="utf-8" />
<script src="scripts/angular.min.js"></script>
</head>
<body ng-app="ngcontrollereg">
<div ng-controller="SimpleController">
Name: <input type="text" ng-model="name" />
<br />
<ol>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase}}-{{cust.city}}</li>
</ol>
</div>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'John Does', city: 'Phoenix' },
{ name: 'Lake Oswere', city: 'Phoenix' },
{ name: 'Raman', city: 'Kanchira' },
{ name: 'Alvaro', city: 'Kanchira' }
];
}
</script>
</body>
</html>
You need to create the angular module and register the controller with the module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ngcontrollereg">
<div ng-controller="SimpleController">
Name:
<input type="text" ng-model="name" />
<br />
<ol>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase}}-{{cust.city}}</li>
</ol>
</div>
<script>
var app = angular.module('ngcontrollereg', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Does',
city: 'Phoenix'
}, {
name: 'Lake Oswere',
city: 'Phoenix'
}, {
name: 'Raman',
city: 'Kanchira'
}, {
name: 'Alvaro',
city: 'Kanchira'
}];
});
</script>
</body>
Or you can create it like this :
angular.module('ngcontrollereg',[]).controller('SimpleController' ,function_Controller)
function function_Controller($scope) {
$scope.customers = [
{ name: 'John Does', city: 'Phoenix' },
{ name: 'Lake Oswere', city: 'Phoenix' },
{ name: 'Raman', city: 'Kanchira' },
{ name: 'Alvaro', city: 'Kanchira' }
];
}
I am getting following error while trying to list contents from controller function in angular JS. I am pretty new to Angular JS. I checked one the video
tutorial and tried code by my own. I written the same code as it was there in the tutorial but though it is showing this error. Unable to understand what cause this to happen.
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=simpleController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at file:///F:/Study/angular/angular.min.js:6:417
at Rb (file:///F:/Study/angular/angular.min.js:19:510)
at sb (file:///F:/Study/angular/angular.min.js:20:78)
at $get (file:///F:/Study/angular/angular.min.js:75:396)
at file:///F:/Study/angular/angular.min.js:57:100
at r (file:///F:/Study/angular/angular.min.js:7:408)
at B (file:///F:/Study/angular/angular.min.js:56:471)
at g (file:///F:/Study/angular/angular.min.js:51:335)
at g (file:///F:/Study/angular/angular.min.js:51:352)
My code is as below -
<head>
<title>Angular ng-controller</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div data-ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
}
</script>
</body>
You must inject your controller into application module.
Give your app a name:
<html ng-app='myApp'>
Inject controller:
var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [
{ name:'John Doe',city : 'Pheonix'},
{ name : 'John Smith',city: 'New York'},
{ name : 'Jane Doe',city : 'San Fransisco'}
];
}
Controller simpleController should be registered under angular app.
see the working code below.
var app = angular.module('app', []);
app.controller('simpleController', function($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div data-ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
</div>
Your code is absolute correct for the angular version less than 1.3 except the function name spelling. It should be data-ng-controller="SimpleController" while calling as you have declared.
You can try after including following cdn
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js
jsfiddle: http://jsfiddle.net/samirkumardas/3tt3p09h/
You are not defined angular.module in your script.
<head>
<title>Angular ng-controller</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app='filterApp'>
<div ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module('filterApp', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
}
</script>
</body>
I am learning Angularjs. I have started with http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
Most of the tutorial examples worked fined until I dashed into the following code:
<html>
<head>
</head>
<body data-ng-app=''>
<div data-ng-controller="simpleController" >
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
<script src='angular.min.js'></script>
<script>
function simpleController($scope){
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
</script>
</div>
</body>
</html>
You are using a controller with out creating a module. You have to create a module before handling the controller.
In older versions of Angular JS(<1.3) you can create a controller with out a module. But in later versions it is not possible.
Please have a look at the below code
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"> </script>
</head>
<body data-ng-app='myapp'>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="x in names">{{ x.name}}</li>
</ul>
</div>
<script>
var app = angular.module('myapp', [])
app.controller('simpleController', function($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
});
</script>
</body>
</html>
OR
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
</head>
<body ng-app='myapp'>
<ul ng-controller='simpleController'>
<li ng-repeat='x in names'>{{x}}</li>
</ul>
<script>
function simpleController($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
}
simpleController.$inject = ['$scope'];
angular.module('myapp', []).controller('simpleController', simpleController)
</script>
You problem is you are using Angular 1.3+
Your code will work with Lower Version of angular (lesser than 1.3), because you are using global function declaration, & the global function declaration is disabled by default in angular 1.3.
If you want to get your code Working you need to enable global controller function declaration while initializing angular.
Config
app.config($controllerProvider) {
// Don't do this unless you *have* to
$controllerProvider.allowGlobals();
});
But this is not good practice to use global functions, you should us modular approach as angular do use it separate out code. Then do mention you module name in you ng-app directive like ng-app="app"
Code
angular.module('app', [])
.controller('simpleController',simpleController)
function simpleController($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
}
HTML
<body data-ng-app=''>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
</div>
</body>
The better way to do is creating controllers.js for controller
<html ng-app='myapp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div data-ng-controller="simpleController" >
<ul>
<li data-ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
</div>
</body>
</html>
The logic in controllers.js should be with module:
var app = angular.module('myapp', [])
app.controller('simpleController', function($scope) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Hege',
country: 'Sweden'
}, {
name: 'Kai',
country: 'Denmark'
}];
});
I'm trying to find a problem for over an hour. I got an error:
Error: Argument 'SimpleController' is not a function, got undefined
Does anyone know why SimpleController is undefined? Thanks!
<!DOCTYPE html>
<html ng-app>
<body>
<div ng-controller="SimpleController">
<ul>
<li ng-repeat="customer in customers">
{{ customer.name }}
</li>
</ul>
</div>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Kentucky' },
{ name: 'Mister X', :city: 'SF' }
];
}
</script>
</body>
</html>
You have a typo in your array. Delete this colon and it'll work
$scope.customers = [
{ name: 'Dave Jones', city: 'Kentucky' },
{ name: 'Mister X', **:** city: 'SF' }
];
Remove the : in front of :city:.
Working example:
http://jsfiddle.net/colllin/aQHpb/