I can't get the images to display, it's supposed to display a thumbnail and full image for each "gem" the angular tutorial isn't detailed enough..
heres my html code:
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
<img ng-src="{{product.images[0].full}}"/>
</h3>
</li>
</ul>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
JS CODE:
(function(){
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.products = gems;
});
var gems = [
{
name: "dodecahedron",
price: 2.95,
description: ". . .",
images: [
{
full: 'gemfull.gif',
thumb: 'gemthumb.gif'
},
{
full: 'gemfull.gif',
thumb: 'gemthumb.gif'
},
],
name: "Pentagonal Gem",
price: 5.95,
description: ". . .",
images: [
{
full: 'gemfull.gif',
thumb: 'gemthumb.gif'
full: 'gemfull.gif',
thumb: 'gemthumb.gif'
},
],
]
})();
How can i get this to work?
It's supposed to be like a shop, but i can't seem to get the JS (or html) to work proper instead i just get "{{product.name}} {{product.price | currency}}" in the browser when i run the document
Your var gems = [ variable is not proper formated.
I have fix var gems variable and your code is working fine. Closing braces [, { are not at proper places.
Check below snippet without images:
(function(){
var app = angular.module('store', []);
var gems = [{
name: "dodecahedron",
price: 2.95,
description: ". . .",
images: [
{
full: 'gemfull.gif',
thumb: 'gemthumb.gif'
},
{
full: 'gemfull.gif',
thumb: 'gemthumb.gif'
},
]},{
name: "Pentagonal Gem",
price: 5.95,
description: ". . .",
images: [
{
full: 'gemfull.gif',
thumb: 'gemthumb.gif'
},{
full: 'gemfull.gif',
thumb: 'gemthumb.gif'
},
],
}
];
app.controller('StoreController', function(){
this.products = gems;
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="store">
<head>
</head>
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
<img ng-src="{{product.images[0].full}}"/>
</h3>
</li>
</ul>
</body>
</html>
Related
I'm new to AngularJS, and this project pushes what I already know about using ng-repeat and controllers.
Goal : To make it so when you select an option from the drop down menu and click the button, the guitars will show up with the assistance of ng-repeat. For now, only the names will show up, but I'm focused on ensuring the app.js file works.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Angular Project 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<header ng-controller="HeaderCtrl">
<h1 id="title">{{appDetails.title}}</h1>
<h3 id="tagline">{{appDetails.tagline}}</h3>
</header>
<select id="dropdown">
<option value="Yamaha">Yamaha</option>
<option value="Gibson">Gibson</option>
<option value="Jackson">Jackson</option>
<option value="ESP">ESP</option>
</select>
<br>
<input type="submit" id="searchGuitars" value="Search!">
<section id="bookSection" ng-controller="GuitarCtrl">
<div ng-repeat="guitar in guitars">
{{guitar.title}}
</div>
</section>
</body>
</html>
JS :
var app = angular.module("myApp", []);
app.controller("HeaderCtrl", function ($scope) {
$scope.appDetails = {
title: "JamLog",
tagline: "Take a look at our Fancy Instruments in Stock!"
};
})
app.controller("GuitarCtrl", function ($scope) {
$('#searchGuitars').click(function() {
if ($('#dropdown').val() == "Yamaha") {
$scope.guitars = [
{
title: "Yamaha Revstar 420",
instrument: "Electric Guitar",
color: "Red",
price: "$499.99",
details: "Yes",
imageURL: "YamahaRS420.jpg"
},
{
title: "Yamaha Pacifica Series PAC012",
instrument: "Electric Guitar"
color: "Blue",
price: "$",
details: "Yes",
imageURL: "YamahaPacificaSeriesPAC012.jpg"
}
];
}
else if ($('#dropdown').val() == "Gibson") {
$scope.guitars = [
{
title: "Gibson Les Paul Custom",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "GibsonLesCustomBlue.jpg"
},
{
title: "Thunderbird",
instrument: "Bass",
color: "Black",
price: "$",
details: "Used by SOAD Bassist",
imageURL: "GibsonThunderbirdIV.jpg"
}
];
}
})
})
I'm hoping it's not a small error I missed, but the overall layout of this program seems as if it would work, and am unsure as to why not.
Please try to declare JQuery CDN before Angular
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
If you already use the angularjs, do not mix it up with JQuery.
Maybe this solution below could help you.
"use strict";
angular
.module('app')
.controller("HeaderCtrl", function ($scope) {
$scope.appDetails = {
title: "JamLog",
tagline: "Take a look at our Fancy Instruments in Stock!"
};
})
.controller("GuitarCtrl", function ($scope) {
$scope.searchGuitars = function(guitar) {
if (guitar == "Yamaha") {
$scope.guitars = [
{
title: "Yamaha Revstar 420",
instrument: "Electric Guitar",
color: "Red",
price: "$499.99",
details: "Yes",
imageURL: "YamahaRS420.jpg"
},
{
title: "Yamaha Pacifica Series PAC012",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "YamahaPacificaSeriesPAC012.jpg"
}
];
}
else if (guitar == "Gibson") {
$scope.guitars = [
{
title: "Gibson Les Paul Custom",
instrument: "Electric Guitar",
color: "Blue",
price: "$",
details: "Yes",
imageURL: "GibsonLesCustomBlue.jpg"
},
{
title: "Thunderbird",
instrument: "Bass",
color: "Black",
price: "$",
details: "Used by SOAD Bassist",
imageURL: "GibsonThunderbirdIV.jpg"
}
];
}
console.log($scope.guitars);
}
});
<!DOCTYPE html>
<html>
<head>
<title>Angular Project 2</title>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="style.css">-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script src="app.js"></script>-->
</head>
<body ng-app="app">
<header ng-controller="HeaderCtrl">
<h1 id="title">{{appDetails.title}}</h1>
<h3 id="tagline">{{appDetails.tagline}}</h3>
</header>
<select id="dropdown" ng-model="dropdownSelect">
<option value="Yamaha">Yamaha</option>
<option value="Gibson">Gibson</option>
<option value="Jackson">Jackson</option>
<option value="ESP">ESP</option>
</select>
<br>
<div ng-controller="GuitarCtrl">
<input type="button" ng-click="searchGuitars(dropdownSelect)" id="searchGuitars" value="Search!">
<section id="bookSection">
<div ng-repeat="guitar in guitars">
{{guitar.title}}
</div>
</section>
</div>
</body>
</html>
I am trying to learn Angular and stuck in the following Image array. Can anyone please explain what is the problem in my code and how to fix this ?
FilterAndImages.html
<!DOCTYPE html>
<html ng-app="store">
<head>
<title>First Angular</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div class="container">
<ul class="list-group" ng-repeat="product in store.products | orderBy = 'price'">
<li class="list-group-item">
<h3> {{product.name}} </h3>
<p> {{product.description}} </p>
<img ng-src="{{product.images[0].full}}" />
<em class="pull-right">
{{product.price | currency}}
<br><button ng-show="product.canPurchase"> Add to Cart </button>
</em>
</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="App.js"></script>
</body>
</html>
App.js
(function () {
var app = angular.module('store', []);
var gems = [{
name: 'Ruby',
price: 2.95,
description: 'This is Ruby on Rails :)',
canPurchase: true,
images: [
{
full: 'full.png',
thumb: 'thump.jpg'
},
]
},
{
name: "Black Pearl",
price: 1.5,
description: "Jack Sparrow !!",
canPurchase: false,
images: [
{
full: 'full.png',
thumb: 'thump.jpg'
},
],
}];
app.controller('StoreController', function () {
this.products = gems;
});
})();
I will be really thankful to you guys.
I created a plunker example with your code , that makes the order ,check it here:
https://plnkr.co/edit/uVDl51EyRuwNmj428it1?p=preview
instead of <ul class="list-group" ng-repeat="product in products | orderBy ='price'">
try to use ':' instead of '=' on the orderby:
<ul class="list-group" ng-repeat="product in products | orderBy :'-price'">
One of the problems stands in the way you call the orderBy filter.
<ul class="list-group" ng-repeat="product in store.products | orderBy = 'price'">
should become:
<ul class="list-group" ng-repeat="product in store.products | orderBy: 'price'">
For further options on this feature please see official documentation.
try this
app.controller('StoreController', function ($scope) {
$scope.products = gems;
});
I am now practicing AngularJS.
My Problem is :ng-repeat does not repeat my array.
index.html:
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div 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>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js:
(function(){
var app = angular.module('store', []);
var gems = [{name: 'Dodecahedron',
price: 2.95,
description: 'Hidden mass',
canPurchase : true,
soldOut : true},
{name: 'Pentagonal gem',
price: 5.95,
description: 'Vacuum mass',
canPurchase : false,
soldOut : false}
}];
app.controller('StoreController', function(){
this.products = gems;
});
})();
Can anybody tell me where the fault is?
You provided extra }
here
{name: 'Pentagonal gem',
price: 5.95,
description: 'Vacuum mass',
canPurchase : false,
soldOut : false} <- here
}];
Remove that
{
name: 'Pentagonal gem',
price: 5.95,
description: 'Vacuum mass',
canPurchase: false,
soldOut: false
}];
DEMO
So I'm learning directives and controllers in JSAngular. Currently I'm just trying to get the appetizers to loop through on the menu but can't seem to get the output to respond. What am I missing here? Thanks in advance.
MainController.js:
app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Bruschetta',
description: 'Grilled bread garlic, tomatoes, olive oil.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
}
];
$scope.mains = [
{
name: 'Roast Beef Au Jus',
description: 'Delicious Amazing Sauce',
price: 15.99
},
{
name: 'Prime Rib',
description: 'Just like Jacoby/s',
price: 18.95
},
{
name: 'BBQ Ribs',
description: 'Better than Krupa/s',
price: 15.99
}
]
$scope.extras = [
{
name: 'Cole slaw',
},
{
name: 'Creamed Spinach',
},
{
name: 'Boston Baked Beans',
}
]
}]);
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app='PizzaPlanetApp'>
<div class="header">
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div class="appetizers row" ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<h3 class="name"> {{ appetizer.name }} </h3>
<p class="description"> {{ appetizer.description }} </p>
</div>
<div class="price col-md-3">
<p class="price"> {{ appetizers.price | currency }} </p>
</div>
</div>
</div>
</div>
<div class="footer">
<pizza-footer></pizza-footer>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
you need to refer to your PizzaPlanetApp application module first. Add the following line of code before creating the controller.
var app = angular.module("PizzaPlanetApp", []);
This refers to the app you want to create the controller of and contains the list of modules your app depends on.
In your case the list is empty.
jsfiddle
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>