I am a beginner in angularjs, so I have decided to do go with google tutorial, and I just don't understand why this error keep occurring; I searched for the solution in stackoverflow, and most of the people said to take off the"gemStore" in my ng-app, but I tried that too and it didn't work as well :
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=gemStore&p1=Error%3…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.1%2Fangular.min.js%3A21%3A332)
at angular.js:38
at angular.js:4759
at q (angular.js:357)
at g (angular.js:4720)
at eb (angular.js:4642)
at c (angular.js:1838)
at Mc (angular.js:1859)
at pe (angular.js:1744)
at angular.js:32977
at HTMLDocument.b (angular.js:3314)
Can anybody help?
thanks!
js code:
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function() {
this.products = gems;
});
var gems = [{
name: 'Azurite',
description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
shine: 8,
price: 110.50,
rarity: 7,
color: '#CCC',
faces: 14,
images: [ ]
}, {
name: 'Bloodstone',
description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
shine: 9,
price: 22.90,
rarity: 6,
color: '#EEE',
faces: 12,
images: [
"images/gem-01.gif",
"images/gem-03.gif",
"images/gem-04.gif"
]
}, {
name: 'Zircon',
description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
shine: 70,
price: 1100,
rarity: 2,
color: '#000',
faces: 6,
images: [
"images/gem-06.gif",
"images/gem-07.gif",
"images/gem-09.gif"
]
}];
})();
index.html code:
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
>
</head>
<body ng-controller="StoreController as store">
<!-- Products Container -->
<div class="list-group">
<!-- Product Container -->
<div class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
</h3>
<!-- Image Gallery -->
<div ng-show="product.images.length" class="gallery">
<img class="img img-circle img-thumbnail center-block" ng-src="{{product.images[0]}}" />
<ul class="clearfix">
<li class="small-image pull-left thumbnail" ng-repeat="image in product.images"> <img ng-src="{{image}}" /> </li>
</ul>
</div>
</div>
</div>
</body>
</html>
You have not closed the paranthesis correctly, alos assign this.gems = gems; at the bottom .
DEMO
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function() {
var gems = [{
name: 'Azurite',
description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
shine: 8,
price: 110.50,
rarity: 7,
color: '#CCC',
faces: 14,
images: []
}, {
name: 'Bloodstone',
description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
shine: 9,
price: 22.90,
rarity: 6,
color: '#EEE',
faces: 12,
images: [
"images/gem-01.gif",
"images/gem-03.gif",
"images/gem-04.gif"
]
}, {
name: 'Zircon',
description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
shine: 70,
price: 1100,
rarity: 2,
color: '#000',
faces: 6,
images: [
"images/gem-06.gif",
"images/gem-07.gif",
"images/gem-09.gif"
]
}];
this.products = gems;
});
})();
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<!-- Products Container -->
<div class="list-group">
<!-- Product Container -->
<div class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
</h3>
<!-- Image Gallery -->
<div ng-show="product.images.length" class="gallery">
<img class="img img-circle img-thumbnail center-block" ng-src="{{product.images[0]}}" />
<ul class="clearfix">
<li class="small-image pull-left thumbnail" ng-repeat="image in product.images"> <img ng-src="{{image}}" /> </li>
</ul>
</div>
</div>
</div>
</body>
</html>
There is no problem with parenthesis.
Your code just works, I tested it just now in Chrome and Firefox but you should avoid using single quote.
Double quotes is considered standard while single quote is not. http://www.json.org/
Could you provide more information like the browser/version you're using ?
Open a Chrome tab in private mode without any chrome extension and check if it still fails.
Edit: Are you sure that the app.js file contains only the code mentioned above?
If not, please provide the full content of app.js
Related
I'm having a serious issue with an Angular lesson in Codecademy. I'm not sure if there is a bug in the program running Codecademy or if there is a mistake in my code. I should be seeing this H1 heading, This Month's Bestsellers in addition to all the images of the books. However, instead I'm seeing this result: {{title}} along with this message: **"Oops! The test returned an error. Maybe you have a syntax error, or a typo. See full error. Why am I seeing {{title}}, which is html code, being displayed on the screen? I can't seem to find out why!
This is the html:
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Book End</h1>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="date">{{ product.pubdate | date }}</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
This is the JavaScript (MainController.js):
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'This Month\'s Bestsellers';
$scope.promo = 'The most popular books this month.';
$scope.products = [
{
name: 'The Book of Trees',
price: 19,
pubdate: new Date('2014', '03', '08'),
cover: 'img/the-book-of-trees.jpg'
},
{
name: 'Program or be Programmed',
price: 8,
pubdate: new Date('2013', '08', '01'),
cover: 'img/program-or-be-programmed.jpg'
},
**{
name: 'One Simple Idea',
price: 22,
pubdate: new Date('2011', '02' '18'),
cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
},
{
name: 'Sell Your Idea with or without a Patent',
price: 22,
pubdate: new Date('2015', '03','03'),
cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg"
},
]
}]);
This is the code that I added:
{
name: 'One Simple Idea',
price: 22,
pubdate: new Date('2011', '02' '18'),
cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
},
{
name: 'Sell Your Idea with or without a Patent',
price: 22,
pubdate: new Date('2015', '03','03'),
cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg"
},
This code is in the exact same syntax as the code that immediately precedes it. However, when I remove the code I put in, and leave the original code, everything is ok. See and compare pictures.
Screenshot of result of my additional code
Screenshot of result without my code included
You are missing a , in this line: pubdate: new Date('2011', '02' '18'). It should be pubdate: new Date('2011', '02', '18').
Also, I suppose you added ** to highlight the code in the question. If not, it should not be there in the code on your machine.
Here's a working example of your code: jsFiddle
app.js //this is my app.js file I've included another file containing the HeaderCtrlModule in it
var app = angular.module("BooKart",["ngRoute","HeaderCtrlModule"]);
app.config(function($routeProvider){
$routeProvider
.when("/books",{
templateUrl: "views/book-list.html",
controller: "BookListCtrl"
})
.when("/kart",{
templateUrl: "views/kart-list.html"
})
.otherwise({
redirectTo: "/books"
})
});
kart-list.html //this loads the kart view
<div>
This is Kart view.
</div>
book-list.html// this loads the booklist view
<div id="bookListWrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search here...">
</div>
</form>
<br/>
<ul class="list-unstyled">
<li class="book" ng-repeat="book in books"
style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
<div class="book-details clearfix">
<h3>{{book.name}}</h3>
<p>{{book.price}}</p>
<ul class="list-unstyled list-inline">
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to
Kart</button>
</div>
</li>
</ul>
</div>
index.html
<!doctype html>
<html lang="en" ng-app="BooKart">
<head>
<meta charset="utf-8">
<title>Welcome to BooKart</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="js/controllers/app.js"></script>
<script src="js/controllers/HeaderCtrl.js"></script>
</head>
<body>
<div id="header-wrapper" ng-controller="HeaderCtrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline pull-left">{{appDetails.tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li class="active">Books</li>
<li>Kart</li>
</ul>
</div>
</div>
<div ng-view>
</div>
</body>
</html>
HeaderCtrl.js
angular.module("HeaderCtrlModule",[])
.controller("HeaderCtrl",["$scope",function($scope)
{
$scope.appDetails = {};
$scope.appDetails.title = "BooKart";
$scope.appDetails.tagline = "We have 1 Million Books for you";
}])
.controller("BookListCtrl",["$scope","$http",function($scope,$http){
{
$scope.books = [
{
imgUrl: "adultery.jpeg",
name: "Adultery",
price: 205,
rating: 4,
binding: "Paperback",
publisher: "Random House India",
releaseDate: "12-08-2014",
details: "Linda, in her thirties, begins to question the routine and
predictability of her days. In everybodys eyes, she has a perfect life-happy
marriage, children and a career. Yet what she feels is an eno... <a
href='#'>View More<a>"
},
{
imgUrl: "geronimo.jpeg",
name: "Geronimo Stilton Spacemice#2 : You're Mine, Captain!",
price: 168,
rating: 5,
binding: "Paperback",
publisher: "Scholastic",
releaseDate: "01-07-2014",
details: "Geronimo Stilton meets outer space in this cosmically fun
spin-off series!Meet Geronimo StiltonixHe is a spacemouse - the Geronimo
Stilton of a parallel universe! He is captain of the spaceship Mou... View
More"
},
{
imgUrl: "life-or-death.jpeg",
name: "Life or Death",
price: 339,
rating: 4,
binding: "Paperback",
publisher: "Hachette India",
releaseDate: "01-04-2014",
details: "Why would a man escape from prison the day before he's due
to be released? Audie Palmer has spent a decade in prison for an armed
robbery in which four people died, including two of his gang. Five... View
More"
},
{
imgUrl: "playing.jpeg",
name: "Playing It My Way : My Autobiography",
price: 599,
rating: 5,
binding: "Hardcover",
publisher: "Hodder & Stoughton",
releaseDate: "01-08-2014",
details: "I knew that if I agreed to write my story, I would have to
be completely honest, as thats the way I have always played the game and
that would mean talking about a number of things I have not addr... View
More"
},
{
imgUrl: "the-fault.jpeg",
name: "The Fault in Our Stars",
price: 227,
rating: 4.5,
binding: "Paperback",
publisher: "Penguin Books Ltd",
releaseDate: "25-01-2013",
details: "Despite the tumor-shrinking medical miracle that has
bought her a few years, Hazel has never been anything but terminal, her
final chapter inscribed upon diagnosis. But when a gorgeous plot twist n...
View More"
},
{
imgUrl: "wings-of-fire.jpeg",
name: "Wings of Fire: An Autobiography",
price: 124,
rating: 5,
binding: "Paperback",
publisher: "Universities Press",
releaseDate: "25-08-2000",
details: "Wings of Fire traces the life and times of India's former
president A.P.J. Abdul Kalam. It gives a glimpse of his childhood as well
as his growth as India's Missile Man. Summary of the Book Wings... View
More"
}
$scope.addToKart = function(book)
{
console.log("add to kart: ", book);
}
}]);
I think the code looks fine I've also included #!/ rather #/ not sure why it is not working please some take a look at tell me what is wrong. I'm new to angular and there is no error in the console, so that also doesn't help. Thanks in advance. please do help me out
If you don't use local server, Chrome doesn't load other html files in existing html. But, it will work in Firefox browser..
Try visual studio. Create a project in visual studio and run using it.
There are few issues in your code :
Remove extra { in your BookListCtrl function.
Correct your route, change it to : href="#/kart"
See this working plunker
Your included scripts seems to be ok, and just a suggestion your module name is BooKart, not BookKart
This is my first project with angularjs. I'm using md-data-table for angular material web app. I installed md-data-table and it started asking for lodash. So I installed lodash. That's when I got this [error][1]. So I thought maybe angular-lodash might help, and I got another error that says _.methods is not a function. I found some posts about lodash does not support certain functions anymore. But I can't seem to find anything useful to my case. What am i missing here?
Code:
var app = angular.module('app', [
'ngMaterial',
'ngMaterialSidemenu',
'mdPickers',
'ui.grid',
'mdDataTable']);
app.controller('appCtrl', function ($scope, $mdDialog, $mdpTimePicker) {
$scope.items = [1, 2, 3, 4, 5];
$scope.selectedItem = $scope.items[0];
$scope.getSelectedText = function () {
if ($scope.selectedItem != undefined) {
return 'You chose ' + $scope.selectedItem + '.';
} else {
return 'Choose an item.';
}
};
$scope.selectedTime = $scope.selectedDate = new Date();
$scope.message = 'Hello';
// directive
$scope.point = {
pointId: '1001'
};
$scope.browser = function (ev) {
var searchByColumns = [
'Point ID',
'Description'
];
var pointList = [{
pointId: '1001',
description: 'point 1'
}, {
pointId: '1002',
description: 'point 2'
}, {
pointId: '1003',
description: 'point 3'
}];
$mdDialog.show({
templateUrl: '/dialogs/browser/grid-browser.html',
parent: angular.element(document.body),
targetEvent: ev,
locals: {
items: pointList,
searchByColumns: searchByColumns
},
openFrom: '#searchBtn',
clickOutsideToClose: true,
controller: function ($scope, items, searchByColumns) {
$scope.items = items;
$scope.searchByColumns = searchByColumns;
$scope.selectedColumn = $scope.searchByColumns[0];
$scope.getSelectedText = function () {
return $scope.selectedColumn;
};
}
})
// .then(function (answer) {
// $scope.status = 'You said the information was "' + answer + '".';
// }, function () {
// $scope.status = 'You cancelled the dialog.';
// })
;
};
$scope.nutritionList = [{
id: 601,
name: 'Frozen joghurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
}, {
id: 602,
name: 'Ice cream sandwitch',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '84%',
iron: '1%'
}, {
id: 603,
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 24,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
}];
});
<html lang="en">
<head>
<link rel="stylesheet" href="/node_modules/angular-material/angular-material.css"></link>
<link rel="stylesheet" href="/node_modules/angular-material-sidemenu/dist/angular-material-sidemenu.css"></link>
<link rel="stylesheet" href="/node_modules/mdPickers/dist/mdPickers.css"></link>
<link rel="stylesheet" href="/node_modules/angular-material-time-picker/dist/md-time-picker.css"></link>
<link rel="stylesheet" href="/assets/md-data-table/md-data-table.min.css"></script>
<link rel="stylesheet" href="/assets/css.css"></link>
<link rel="stylesheet" href="/assets/icons.css"></link>
<link rel="stylesheet" href="/assets/ui-grid/ui-grid.min.css"></link>
<link rel="stylesheet" href="/main.css"></link>
</head>
<body ng-app="app" ng-controller="appCtrl" ng-cloak>
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2 class="md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content layout-padding layout="row">
<md-sidemenu locked="false">
<md-sidemenu-group>
<md-sidemenu-content md-icon="home" md-heading="Master" md-arrow="true">
<md-sidemenu-button ng-href="#pointMaster">Point</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
</md-sidemenu-content>
<md-sidemenu-content md-heading="Menu 2" md-arrow="true">
<md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
</md-sidemenu-content>
</md-sidemenu-group>
<md-sidemenu-group>
<md-divider></md-divider>
<md-subheader class="md-no-sticky">Caption</md-subheader>
<md-sidemenu-button href="#">Menu 4</md-sidemenu-button>
</md-sidemenu-group>
</md-sidemenu>
<md-tabs md-dynamic-height md-border-bottom flex="75">
<md-tab label="Tax">
<form flex>
<div layout="row" layout-align="start center">
<input-button flex="50" md-margin required="false" label="Point ID" tableId="point.pointId" browse="browser()"></input-button>
<span style="width: 20px"></span>
<md-checkbox aria-label="Default" class="md-primary" layout-align="center center" flex>
Default
</md-checkbox>
</div>
<div layout="row">
<md-input-container>
<label>Items</label>
<md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
<md-optgroup label="items">
<md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<mdp-time-picker mdp-auto-switch="true" ng-model="selectedTime" message="message">
</mdp-time-picker>
</div>
<div layout="row" flex>
<md-button class="md-raised md-primary">Save</md-button>
<md-button class="md-raised md-warn">Delete</md-button>
<md-button class="md-raised md-primary" ng-disabled="true">Reset</md-button>
</div>
<div layout="row" flex>
<md-datepicker ng-model="selectedDate" md-placeholder="Enter date" layout-align="start center" md-open-on-focus>
</md-datepicker>
</div>
</form>
</md-tab>
<md-tab label="Family" layout="column" flex>
<mdt-table mdt-row="{'data': nutritionList, 'table-row-id-key': 'id',
'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron']}">
<mdt-header-row>
<mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
<mdt-column align-rule="right">Calories</mdt-column>
<mdt-column align-rule="right">Fat (g)</mdt-column>
<mdt-column align-rule="right">Carbs (g)</mdt-column>
<mdt-column align-rule="right">Protein (g)</mdt-column>
<mdt-column align-rule="right">Sodium (mg)</mdt-column>
<mdt-column align-rule="right">Calcium (%)</mdt-column>
<mdt-column align-rule="right">Iron (%)</mdt-column>
</mdt-header-row>
<mdt-custom-cell column-key="Dessert" ng-click="viewFats(value)">
<span ng-repeat="name in names">{{value}}</span>
</mdt-custom-cell>
</mdt-table>
</md-tab>
</md-tabs>
</md-content>
</body>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-messages/angular-messages.js"></script>
<script src="/node_modules/moment/moment.js"></script>
<script src="/node_modules/angular-moment/angular-moment.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/node_modules/angular-material-sidemenu/dist/angular-material-sidemenu.js"></script>
<script src="/node_modules/mdPickers/dist/mdPickers.js"></script>
<script src="/node_modules/angular-material-time-picker/dist/md-time-picker.js"></script>
<script src="/assets/lodash/lodash.min.js"></script>
<script src="/assets/md-data-table/md-data-table.min.js"></script>
<script src="/assets/md-data-table/md-data-table-templates.min.js"></script>
<script src="/assets/ui-grid/ui-grid.min.js"></script>
<script src="/assets/angular-material-icons.min.js"></script>
<script src="/app.js"></script>
<script src="/directives/input-button/input-button.js"></script>
<script src="/dialogs/browser/grid-browser.js"></script>
</html>
ps://i.stack.imgur.com/WmdiC.png
#Htet Aung,
The code snippet provided by you does not have valid md-data-table tags in html and also errors while injecting md-data-table. For your information you are using "mdDataTable" which was designed for ANGULAR (angular2) version. But looking at your code suggests you need md-data-table for Angularjs(version 1.x).
No Need for loadash libraries. just normal md-data-table.js from cdnjs will do and inject the dependency 'md.data.table' in your module.
Please find the below :
[MD Data Table for AngularJs Material and Angularjs 1.x version]
[1]: https://codepen.io/anon/pen/BjvLVJ?editors=1010
So currently I am following the course 'shaping up with angular.js', I quite like it so far but I am only on 1.5 'Built in Directives'. But I can't get my head around the ng-repeat what they using in the course.
So what you need to to do is just put ng-repeat on the div and it should loop through all items in the array and show them. Maby I mistyped something but I rewrote the thing 2 times and read it over like a 100 times.. :(
This is my current html template
<html lang="en" ng-app="store">
<body ng-controller="storeController as store">
<div ng-hide="store.product.soldOut" ng-repeat="product in store.products">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button ng-show="store.product.canPurchase"> Add to cart </button>
</div>
</body>
</html>
And this is my app.js file.
(function () {
var app = angular.module('store', []);
app.controller('storeController', function () {
this.products = gems;
});
var gems = [
{
name: 'Dodecahedron',
price: 295,
description: 'Nice gem',
canPurchase: true,
soldOut: false
},
{
name: "Pentagonal Gem",
price: 5.95,
description: "more nice gems",
canPurchase: true,
soldOut: false
}
]
})();
I can't seems to find out why it isn't repeating itself. And I dont even know why in the course they say 'product in store.products' there is no 'product' called anywhere.
I put it in a codepen also
http://codepen.io/denniswegereef/pen/JYwora
Remove the "store" from your inline bindings. The moment you use ng-repeat you reference your data object from the in clause like this:
<div ng-hide="product.soldOut" ng-repeat="product in store.products">
<h1>{{product.name}}</h1>
<h2>${{product.price}}</h2>
<p>{{product.description}}</p>
<button ng-show="product.canPurchase"> Add to cart </button>
</div>
Your code is messy. Here is the correct version
var app = angular.module('store', []);
app.controller('storeController', function ($scope) {
$scope.products = [
{
name: 'Dodecahedron',
price: 295,
description: 'Nice gem',
canPurchase: true,
soldOut: false
},
{
name: "Pentagonal Gem",
price: 5.95,
description: "more nice gems",
canPurchase: true,
soldOut: false
}
];
});
<html lang="en" ng-app="store">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body ng-controller="storeController">
<div ng-repeat="product in products">
<div ng-hide="product.soldOut">
<h1>{{product.name}}</h1>
<h2>${{product.price}}</h2>
<p>{{product.description}}</p>
<button ng-show="product.canPurchase"> Add to cart </button>
</div>
</div>
</body>
</html>
I am a beginner for AngularJS. I am trying to display "No Tag Found" during filter process with the help of "ng-show".
JS:
function simpleController($scope)
{
$scope.tags = ['HTML','CSS','Jquery','Bootstrap','AngularJS'];
}
HTML:
<div ng-controller="simpleController">
<input class="txt" type="text" ng-model="nameText" />
<div>
<ul>
<li ng-repeat="myKeys in tags| filter:nameText">{{myKeys}}</li>
</ul>
<div ng-show="!tags.length">No Tag Found</div>
</div>
</div>
When I type any value other than array vales, I am not able to get "No Tag Found" using the above code. Please help. Thanks.
If you're filtering in your ng-repeat, you must apply the same filter for you ng-show. If you don't, the ng-show will always refer to the full array :
<div ng-show="!(tags| filter:nameText).length">No Tag Found</div>
Working fiddle : http://jsfiddle.net/HB7LU/3149/
Just better use ng-hide:
<div ng-hide="tags.length">No Tag Found</div>
<div class="box" ng-show="team_stores.length > 0" >
worked for me
easy way to create filter... demo is as below
var app = angular.module('myApp', []);
app.controller('myctrl', function ($scope) {
$scope.friends = [
{ name: "Peter", age: 20 },
{ name: "Pablo", age: 55 },
{ name: "Linda", age: 20 },
{ name: "Marta", age: 37 },
{ name: "Othello", age: 20 },
{ name: "Markus", age: 32 }
];
});
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myctrl">
Name: <input ng-model="filter" type="text" />
<ul>
<li ng-repeat="friend in friends |filter:filter">{{friend.name}}</li>
<li ng-show="!(friends| filter:filter).length">data not found</li>
<!--<link ng-repeat="friend in friends|filter:isActive ">-->
</ul>
</body>
</html>
Also you can try to use filter service, like this: $filter('filter')(array, expression, comparator), this service return new array.
you can see http://code.angularjs.org/1.2.16/docs/api/ng/filter/filter