CODEWITHSUNDEEP
javascriptangularjs
user13286
user13286

Reputation: 3075

Angular - loading content into HTML dynamically on click

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.

Upvotes: 0

Views: 684

Answers (3)

Sajeetharan
Sajeetharan

Reputation: 222722

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>

Upvotes: 1

Groben
Groben

Reputation: 1386

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>

Upvotes: 1

Srigar
Srigar

Reputation: 1688

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)

Upvotes: 0

Related Questions