Question

我正在Angular中创建一个商店，我想为每个产品生成锚标签，然后当您点击其中一个锚标签时，它会将所选产品信息加载到下面的HTML模板中。

这就是我所拥有的：

(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>

我猜我需要在app控制器中构建一个JavaScript函数来处理selected产品，但不知道该怎么做。

Answer 1

您可以在控制器中添加功能：

app.controller('StoreController', function() {
    var ctrl = this;
    this.products = products;

    ctrl.select = function(product){
        ctrl.selected = product;
    }
});

并在html中，为存储控制器上的所有内容添加前缀。请参阅代码段

＆＃13;

(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"
  	 }],
	 }];
})();

＆＃13;

#results {
  margin-top:1em;
}

＆＃13;

<!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>

＆＃13;

Answer 2

应该是

when_modified

和控制器

 <a href ng-click="store.select(product)">{{product.name}}</a>

<强>样本

＆＃13;

var vm = this;
this.products = products;

vm.select = function(product){
    vm.selected = product;
}

＆＃13;

(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"
                }],
        }];
})();

＆＃13;

#results {
  margin-top:1em;
}

＆＃13;

Answer 3

只需在javascript中添加功能即可。你的猜测是对的

$scope.onSelect = function(product) {
   $scope.selected = product;
};

在HTML中，将函数名称更改为onSelect（product）而不是选择（产品）

Angular - 在点击时动态地将内容加载到HTML中

3 个答案: