Angular - loading content into HTML dynamically on click
Question
I am creating a store in Angular and I would like to generate anchor tags for each product, then when you click on one of the anchor tags it will load the selected product information into an HTML template below.
Here's what I have:
(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'm guessing I need to build a JavaScript function into the app controller to handle the selected product, but not sure how to do that.
3 answers
solution1
1 2017-04-10 15:11:36
You can add a function in your controller:
app.controller('StoreController', function() {
var ctrl = this;
this.products = products;
ctrl.select = function(product){
ctrl.selected = product;
}
});
and in html, prefix everything that is on controller with store. See snippet
(function() { var app = angular.module('store', [ ]); app.controller('StoreController', function() { var ctrl = this; this.products = products; ctrl.select = function(product){ ctrl.selected = product; } }); 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="store.select(product)">{{product.name}}</a> </div> </div> </section> <section id="results"> Selected product data should be loaded here: <div class="product"> <h2>{{store.selected.name}}</h2> <div class="product-desc"><p>{{store.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>
solution2
1 ACCPTED 2017-04-10 15:14:34
It should be
<a href ng-click="store.select(product)">{{product.name}}</a>
and In Controller
var vm = this;
this.products = products;
vm.select = function(product){
vm.selected = product;
}
DEMO
(function () { var app = angular.module('store', []); app.controller('StoreController', function () { var vm = this; this.products = products; vm.select = function (product) { vm.selected = product; } }); 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 vm"> <section> <div ng-repeat="product in vm.products" class="product"> <h2>{{product.category}}</h2> <div ng-repeat="product in product.products"> <a href ng-click="vm.select(product)">{{product.name}}</a> </div> </div> </section> <section id="results"> Selected product data should be loaded here: <div class="product"> <h2>{{vm.selected.name}}</h2> <div class="product-desc"> <p>{{vm.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>
solution3
0 2017-04-10 15:06:34
Just add function in javascript. Your guess is right
$scope.onSelect = function(product) {
$scope.selected = product;
};
In HTML, change function name as onSelect(product) instead of select(product)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML Symbols not loading dynamically in Angular
Angular 2 dynamically loading tabs when header click
Dynamically loading json content within a HTML Script
Bind click event to dynamically generated content (Angular 4)
Generate HTML dynamically on button click in Angular js
Dynamically passing HTML content to Angular directives as attributes
Problems loading content dynamically in a SELECT FIELD [ANGULAR JS]
Stop refresh on dynamically loading html contents on a button click
Loading content dynamically from JSON file to HTML page through JS
Syntax error loading content dynamically in html page with ajax
Related Tags