You just need to use ng-repeat to create "li" elements and then access
property of each item in array. Try something like below.
<ul>
<li ng-repeat=product in store.products>
<h1>Red Lagoon</h1>
<p>Price: {{product.price | currency}} <br> Type:
{{product.type + ', ' + product.carat + ' carats'}} </p>
</li>
</ul>
On Monday, August 4, 2014 10:39:47 AM UTC-4, Awks Dine wrote:
>
> Hi there,
> I'm new at AngularJS and today I have a problem. :C
>
> I have 4 files.
>
> 1. *index.html*
> 2. *controller.js* -> in a folder (js/controller.js)
> 3. *data.json* -> in a folder (js/controller.js)
> 4. (angular.min.js) -> in a folder (lib/angular.min.js)
>
> I connected my Json file to the javascript controller, now I can call the
> *product
> *on my index.html, it works fine, but when I call my *products* in an
> Array, it is not working.
>
> Here is my code.
>
> *index.html*
>
> <!doctype html>
> <html ng-app="gemStore">
> <head>
> <script type="text/javascript" src="lib/angular.min.js"></script>
> <script type="text/javascript" src="js/controller.js"></script>
> <link rel="stylesheet" type="text/css" href="css/local.css">
> </head>
> <body ng-controller="StoreController as store">
> <center>
> <div>
> <h1>Flawlanders Jewelry</h1>
> <h3>choose your own jewel!</h3>
> </div>
> </center>
>
>
> <div>
> <ul>
> <li>
> <h1>Red Lagoon</h1>
> <p>Price: {{store.products.price | currency}} <br> Type:
> {{store.products.type + ', ' + store.products.carat + ' carats'}} </p>
> </li>
> </ul>
> </div>
>
> </body>
> </html>
>
>
> *controller.js*
>
> var app = angular.module('gemStore', []);
>
> app.controller('StoreController', ['$http', function($http){
> var store = this;
> store.products = [];
>
> $http.get('js/data.json').success(function(data){
> store.products = data;
> });
> }]);
>
>
> *data.json*
>
> [
>
> {
> "type":"Ruby",
> "carat":"18",
> "price":"1200.00"
>
> },
> {
> "type":"Diamond",
> "carat":"17",
> "price":"1850.00"
>
> }
>
> ]
>
> What should I do ?
>
> *Thanks* for your time !
>
> - Awks
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
