[英]Data binding in ng-repeat in Angular JS
I am a Angular JS beginner and this might be a very silly question but i am finding difficulty with this. 我是Angular JS的初学者,这可能是一个非常愚蠢的问题,但是我对此感到困难。 I have the following code written in angular js to display the list of products with the categories. 我用angular js编写了以下代码,以显示具有类别的产品列表。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller('myController',function($scope){
$scope.welcome = "WELCOME TO STORE"
$scope.products =
{
"ProductDetails": [
{
"category": "Favorites",
"data": [
{
"price": "10",
"description": "Favorites product1 demo description",
"name": "Demo product1"
},
{
"price": "13",
"description": "Favorites product2 demo description",
"name": "Demo product2"
}
]
},
{
"category": "Stationary",
"data": [
{
"price": "10",
"description": "Favorites product1 demo description",
"name": "Demo product1"
},
{
"price": "13",
"description": "Favorites product2 demo description",
"name": "Demo product2"
},
{
"price": "13",
"description": "Favorites product2 demo description",
"name": "Demo product2"
}
]
},
{
"category": "Food",
"data": [
{
"price": "10",
"description": "Favorites product1 demo description",
"name": "Demo product1"
},
{
"price": "13",
"description": "Favorites product2 demo description",
"name": "Demo product2"
},
{
"price": "13",
"description": "Favorites product2 demo description",
"name": "Demo product2"
}
]
}
]
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<h1>{{welcome}}</h1>
<ul>
<li ng-repeat="categories in products.ProductDetails">
<h3> {{categories.category}}</h3>
<ul>
<li ng-repeat="item in products.ProductDetails.data"></li>
<p>{{item.name}}</p>
<p>{{item.description}}</p>
<p>{{item.price}}</p>
</ul>
</li>
</ul>
</div>
</html>
</body>
i am using ng-repeat to loop through the list of items and and display it. 我正在使用ng-repeat遍历项目列表并显示它。 i am bit confused about using multiple ng-repeat and how to bond the data. 我对使用多个ng-repeat以及如何绑定数据感到困惑。 i need the output similar to the image below. 我需要类似于下图的输出。
Thanks in advance. 提前致谢。
You can think of the element that has the ng-repeat as having its own local scope. 您可以认为具有ng-repeat的元素具有其自己的本地范围。 Think of it like a block of code inside {} for an if statement or something like that. 可以将其视为{}中if语句之类的代码块或类似的代码。 Note the closing li
tag below, you must be inside the block created by the li
tag to be able to reference item
. 请注意下面的结束li
标签,您必须位于li
标签创建的块中,才能引用item
。
You also want to repeat over categories.data
你也想重复过categories.data
<li ng-repeat="item in categories.data">
<p>{{item.name}}</p>
<p>{{item.description}}</p>
<p>{{item.price}}</p>
</li>
Replace 更换
ng-repeat="item in products.ProductDetails.data"
To 至
ng-repeat="item in categories.data"
Here Is the problem 这是问题
<ul>
<li ng-repeat="categories in products.ProductDetails">
<h3> {{categories.category}}</h3>
<ul>
<li ng-repeat="item in categories.data"></li>//Set Categories
<p>{{item.name}}</p>
<p>{{item.description}}</p>
<p>{{item.price}}</p>
</ul>
</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.