In the process of developing an Angular store, I aim to create anchor tags for each product so that clicking on a tag will display the selected product information in an HTML template below.
Below is the current code snippet:
(function() {
var app = angular.module('store', [ ]);
app.controller('StoreController', function() {
this.products = products;
});
var products= [
{
category: "Category 1",
products: [{
name: "Product 1",
description: "Lorem ipsum dalor sit amet"
},{
name: "Product 2",
description: "Lorem ipsum dalor sit amet"
}],
},{
category: "Category 2",
products: [{
name: "Product 3",
description: "Lorem ipsum dalor sit amet"
},{
name: "Product 4",
description: "Lorem ipsum dalor sit amet"
}],
}];
})();#results {
margin-top:1em;
}<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="StoreController as store">
<section>
<div ng-repeat="product in store.products" class="product">
<h2>{{product.category}}</h2>
<div ng-repeat="product in product.products">
<a href ng-click="select(product)">{{product.name}}</a>
</div>
</div>
</section>
<section id="results">
Selected product data should be loaded here:
<div class="product">
<h2>{{selected.name}}</h2>
<div class="product-desc"><p>{{selected.description}}</p></div>
</div>
</section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.min.js"></script>
</body>
</html>I reckon that incorporating a JavaScript function into the app controller to handle the selected product is necessary, but I am unsure about how to proceed with it.