gpt4 book ai didi

javascript - 如何解析 Angular 中的嵌套转发器?

转载 作者:行者123 更新时间:2023-11-30 11:39:23 25 4
gpt4 key购买 nike

我正在 Angular 中创建一个商店,我有多个类别,每个类别都有产品。我想将每个类别分成一个单独的 div,然后在一个单独的 div 中列出每个产品。

这是我希望输出的样子:

<div>
<h2>category1</h2>
<div>Product 1</div>
<div>Product 2</div>
</div>

<div>
<h2>category2</h2>
<div>Product 3</div>
<div>Product 4</div>
</div>

这是我目前所拥有的:

(function() {
var app = angular.module('store', [ ]);

app.controller('StoreController', function() {
this.items = products;
});

var products = [{
category1: [{
name: "Product 1",
description: "Lorem ipsum dalor sit amet"
}, {
name: "Product 2",
description: "Lorem ipsum dalor sit amet"
}],
category2: [{
name: "Product 3",
description: "Lorem ipsum dalor sit amet"
}, {
name: "Product 4",
description: "Lorem ipsum dalor sit amet"
}]
}];
})();
<!DOCTYPE html>
<html ng-app="store">

<head>
<link rel="stylesheet" href="style.css">
</head>

<body ng-controller="StoreController as store">

<div ng-repeat="category in store.items">
<h2>{{category}}</h2> <!-- Category title here -->
<div ng-repeat="item in category">{{item.name}}</div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

</html>

Here's a Plunker

最佳答案

你的 ng-repeat 应该是这样的:

<div ng-repeat="category in store.items[0]">
<h2>category{{$index+1}}</h2>
<div ng-repeat="item in category">
{{item.name}}
</div>
</div>

这是工作示例:

(function() {
var app = angular.module('store', []);

app.controller('StoreController', function() {
this.items = [{
something: [{
name: "Product 1",
description: "Lorem ipsum dalor sit amet"
}, {
name: "Product 2",
description: "Lorem ipsum dalor sit amet"
}],
category2: [{
name: "Product 3",
description: "Lorem ipsum dalor sit amet"
}, {
name: "Product 4",
description: "Lorem ipsum dalor sit amet"
}]
}];;
});


})();
<!DOCTYPE html>
<html ng-app="store">

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.min.js"></script>
</head>

<body ng-controller="StoreController as store">

<div ng-repeat="(key, category) in store.items[0]">
<h2>{{key}}</h2>
<!-- Category title here -->
<div ng-repeat="item in category">
{{item.name}}
</div>
</div>
</body>

</html>

关于javascript - 如何解析 Angular 中的嵌套转发器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43280709/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com