Can anyone tell me why I am getting JS error "Error: [$injector:unpr]" with this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table Example</title>
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
<!-- <script src="js/app.js"></script>-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Stylesheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ngRoute', 'ngTable']);
/* Routing */
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'welcome.html'});
$routeProvider.when('/table/', {controller: 'TableCtrl', templateUrl: 'table.html'});
$routeProvider.otherwise({redirectTo: '/'});
}
]);
/* Table controller */
app.controller('TableCtrl', ['$scope', 'ngTableParams', function ($scope, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function ($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
</script>
</head>
<body ng-app="app">
Welcome
Table
<div ng-view="" class="container content"></div>
</body>
where table.html is:
<h1>Events</h1>
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
I am already struggling around with this problem but can't find a solution. Other people reported the same problem but I couldn't find a solution which is working for me.
Thanks for your help,
Max
Here is an working example, probably solve your problem
angular.module('app', ['ngRoute', 'ngTable'])
/* Routing */
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
template: '<div>Welcome</div>'
});
$routeProvider.when('/table/', {
controller: 'TableCtrl',
template: '<h1>Events</h1><p><strong>Page:</strong> {{tableParams.page()}}</p><p><strong>Count per page:</strong> {{tableParams.count()}}</p><table ng-table="tableParams" class="table"><tr ng-repeat="user in $data"><td data-title="Name">{{user.name}}</td><td data-title="Age">{{user.age}}</td></tr></table>'
});
$routeProvider.otherwise({
redirectTo: '/'
});
}
])
.controller('TableCtrl', ['$scope', 'NgTableParams', function($scope, NgTableParams) {
var data = [{
name: "Moroni",
age: 50
}, {
name: "Tiancum",
age: 43
}, {
name: "Jacob",
age: 27
}, {
name: "Nephi",
age: 29
}];
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
<body ng-app="app">
Welcome
Table
<div ng-view="" class="container content"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
Related
I have 3 files: the product-title.html, the index.html calling the product-title and the app.js where I create my directive.
My browser is not showing the code on product-title.html
product-title.html
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
</h3>
index.html
<html ng-app="gemStore">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="list-group" ng-controller="StoreController as store">
<div class="list-group-item cuerpo" ng-repeat="product in store.products">
<product-title></product-title>
</div>
</div>
</body>
app.js
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
app.directive('productTitle', function(){
return {
restrict: "E",
templateUrl: "product-title.html"
};
});
})();
gems is an array of objects with their names, price etc.
The code was working just fine untill I tried to create the first directive.
May Help you.
<html ng-app="gemStore">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="list-group" ng-controller="StoreController">
<div class="list-group-item cuerpo" ng-repeat="product in products">
<product-title></product-title>
</div>
</div>
</body>
JS Code:
var app = angular.module('gemStore', []);
app.controller('StoreController', function($scope){
var gems = [
{name: "LIVKR-2015", price: 20},
{name: "LIVHCC-2015", price: 22},
{name: "LIKKCC-2015", price: 24},
{name: "LICPCC-2015", price: 20},
{name: "LMLHCC-2015", price: 20}
];
$scope.products = gems;
});
app.directive('productTitle', function(){
return {
restrict: "E",
templateUrl: "product-title.html"
};
});
I'm trying to launch a function everytime the ng-repeat is finished,
I've got the following so far:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.friends = [{
name: 'John',
phone: '555-1276'
}, {
name: 'Mary',
phone: '800-BIG-MARY'
}, {
name: 'Mike',
phone: '555-4321'
}, {
name: 'Adam',
phone: '555-5678'
}, {
name: 'Julie',
phone: '555-8765'
}, {
name: 'Juliette',
phone: '555-5678'
}]
$scope.test = function() {
console.log('test');
}
});
app.directive('onFinishRender', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
scope.$evalAsync(attr.onFinishRender);
}
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label>Search:
<input ng-model="searchText">
</label>
<table id="searchTextResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friend in friends | filter:searchText" on-finish-render="test()">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</body>
</html>
This fires the function once, but how would you modify this to make it work every time the filter get's applied?
Plunker version
If I understand your requirement correct, you would use ng-change directive to your input box of search.
Use this :
<input ng-model="searchText" ng-change="test();">
I have added scope to the directive. also ngRepeat's $last is sent through the scope variable. And changes to scope.last are being watched using scope.$watch so whenever list changes scope.last will change and then return true at the last step. This will run whenever there is a change in collection.
See the updated Plunkr
http://plnkr.co/edit/68XXIQyo2rkUP4uj6bnI?p=preview
HTML:
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<label>Search:
<input ng-model="searchText">
</label>
<table id="searchTextResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friend in friends | filter:searchText" on-finish-render="test()" last="$last">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</body>
</html>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.friends = [{
name: 'John',
phone: '555-1276'
}, {
name: 'Mary',
phone: '800-BIG-MARY'
}, {
name: 'Mike',
phone: '555-4321'
}, {
name: 'Adam',
phone: '555-5678'
}, {
name: 'Julie',
phone: '555-8765'
}, {
name: 'Juliette',
phone: '555-5678'
}]
$scope.test = function() {
console.log('test');
}
});
app.directive('onFinishRender', function($timeout) {
return {
restrict: 'A',
scope: {
onFinishRender: '&',
last: '='
},
link: function(scope, element, attr) {
scope.$watch('last', function(){
if (scope.last === true) {
scope.onFinishRender();
}
});
}
}
});
While trying to use $locationProvider.html5Mode(true); I am getting "TypeError: Cannot read property 'replace' of undefined". When I comment it out I do not get the error, but then I have "#" characters in the URL which I am trying to get rid of. I saw people reported some similar issues with ui.router which I do not use. In any case I was not able to find the solution from those posts. Any help would be appreciated. Thanks!
parserconfig.html
<!DOCTYPE html>
<html ng-app='parserconfigApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular-route.min.js"></script>
<base href="file:///home/myusername/projects/parser_ui/">
<title>Parser Config</title>
</head>
<body>
<div ng-controller='ParserConfigController as parserConfig'>
<h1>Record Types</h1>
<table style="font-size: medium; width: 50%; table-layout: fixed" ng-repeat='recordType in recordTypes'>
<tr>
<td><a>{{recordType}}</a></td>
<td><button ng-click="remove($index)">Remove</button><td>
</tr>
</table>
Add
</div>
<div ng-view></div>
<script type="text/javascript" src="parserconfigApp.js"></script>
</body>
</html>
parserconfigApp.js
'use strict';
var app = angular.module('parserconfigApp', ['ngRoute']);
app.controller('ParserConfigController', ['$scope', '$location', function($scope, $location) {
$scope.recordTypes = recordTypes;
$scope.remove = function(index) {
$scope.recordTypes.splice(index, 1);
}
$scope.changeView = function(view) {
alert($location.path())
$location.path(view);
alert($location.path())
}
}]);
app.controller('AddRecordTypeController', ['$scope', function($scope) {
}]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/addRecordType', {
templateUrl: 'partials/partial1.html',
controller: 'AddRecordTypeController'
})
.otherwise({
redirectTo: '/addRecordType'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
var recordTypes = [
'Boot Record',
'Card Uptime Record',
'Stack Trace'
];
I need to filter the rows in witch the property "age" is greater than "x" number
Older than 18
<div ng-repeat="person in persons | filter:personFilter ">
<div>{{person.name}}</div>
<div>{{person.age}}</div>
</div>
Thanks in advance
According to the docs, you can pass a function to filter: Here's an example.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.2.4" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="example" ng-controller="Ex">
<!-- on click set the filter to our custom function defined in scope -->
Older than 18
<ul>
<li ng-repeat="p in people | filter:personFilter">
{{p.name}} - {{p.age}}
</li>
</ul>
</body>
</html>
controller:
angular.module('example', [])
.controller('Ex', function($scope) {
$scope.personFilter = {};
$scope.people = [
{name: "Bob", age: 32},
{name: 'Billy', age: 12}
];
/* returns true if the provided person is over 18 */
$scope.isOver18 = function(p) {
return p.age > 18;
}
});
I'm new to AngularJS. I'm trying to run a simple example from a book, but it's not working correctly, and I can't figure out why.
This code runs fine:
<html ng-app>
<head>
<script src="angular.js"></script>
<meta charset="UTF-8">
<title>Angular </title>
</head>
<body>
<div ng-controller="HelloController">
<input ng-model="greeting.text"/>
<p>{{greeting.text}}, World!</p>
</div>
<script src="angular.js"></script>
<script>
function HelloController($scope) {
$scope.greeting = {text: 'Hello'};
}
</script>
</body>
</html>
But this is the code I'm having problems with
<html ng-app='myApp'>
<head>
<title>Shopping Cart</title>
<script src="angular.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>{{item.price| currency}}</span>
<span>{{item.price * item.quantity| currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>
Expecting this output:
But getting this output:
I don't understand why I'm not getting the data output, and why it's not repeating. Basically, why the example is not running. I copy and paste the code straight from the book.
When you write ng-app='myApp' you are saying to angular that exists a module named myApp somewhere.
Just add this line before your controllers definition:
var myApp = angular.module('myApp',[]);
You can see the docs here and here
You should define your myApp module:
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="lib/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('CartController', ['$scope', function($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}]);
</script>
</body>
</html>
Give the name of app as html ng-app="myapp" in html file and then add/define the module into the controller as
var myapp = angular.module('myapp', []);
Even I faced this problem, resolved it by invoking module creation scope before controller js . Also ensure module is created in script or js file.
Or you can also add the namespace:
<html lang="en" ng-app="myapp" xmlns:ng="http://angularjs.org">
Even though, adding the module is the best way.
I fixed.
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shopping Cart</title>
<script src="angular-1.5.3/angular.js"></script>
<script>
var myApp = angular.module('myApp',[])
myApp.controller('CartController', function($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka Dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index){
$scope.items.splice(index, 1);
};
});
</script>
</head>
<body ng-controller="CartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity" />
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
</body>
</html>