Javascript Angular JS中的嵌套列表-无法了解如何执行
我对角度JS非常陌生 我正在创建一个简单的web应用程序来学习angular JS 我有一个包含各种植物的主列表。例如，水果、蔬菜等。。为了从MySQL数据库中获取这些数据，我使用了一个PHP脚本 使用时，点击一个类别，我需要展开一个包含该类别中植物名称的列表。例如，如果用户单击“水果”，它会展开一个包含“芒果”、“苹果”、“香蕉”等的列表。。这也可以通过PHP脚本完成。对于脚本，我需要将类别ID作为URL参数传递 例如，选择_category.php？cat_id=1 最后的清单如下Javascript Angular JS中的嵌套列表-无法了解如何执行,javascript,angularjs,ng-repeat,Javascript,Angularjs,Ng Repeat,我对角度JS非常陌生 我正在创建一个简单的web应用程序来学习angular JS 我有一个包含各种植物的主列表。例如，水果、蔬菜等。。为了从MySQL数据库中获取这些数据，我使用了一个PHP脚本 使用时，点击一个类别，我需要展开一个包含该类别中植物名称的列表。例如，如果用户单击“水果”，它会展开一个包含“芒果”、“苹果”、“香蕉”等的列表。。这也可以通过PHP脚本完成。对于脚本，我需要将类别ID作为URL参数传递 例如，选择_category.php？cat_id=1 最后的清单如下 果实
- 果实
- 芒果
- 香蕉
- 苹果
- 蔬菜
- 草药
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<title>Test Display</title>
<body>
<div ng-app="cat_display" ng-controller="customersCtrl">
<div ng-repeat="x in plant_cat">
<button value={{x.cat_id}} type="button" class="btn btn-primary btn-lg btn-block" ng-click="get_plants(x.cat_id)">{{x.cat_name}}</button> </br>
<ul class="list-group">
<li class="list-group-item" ng-repeat="y in plant_cat.plant">{{y.plant_name}}</li>
</ul>
</div>
</div>
</body>
<script>
var app= angular.module('cat_display',[]);
var get_all_plant_cats = function($scope,$http)
{
//get plat categories
$http.get("http://localhost:8080/Aggry/select_plant_categories.php")
.then(function(response){
$scope.plant_cat = response.data.records;
});
//get plants
$scope.get_plants = function(cat_id)
{
$http.get("http://localhost:8080/Aggry/select_plant.php?cat_id="+cat_id)
.then(function(response){
$scope.plant_cat.plant = response.data.records;
});
}
};
app.controller('customersCtrl',get_all_plant_cats);
</script>
谢谢。您想在重复数组中的一个数组中重复，因此代码必须为：
<body>
<div ng-app="cat_display" ng-controller="customersCtrl">
<div ng-repeat="x in plant_cat">
<button value={{x.cat_id}} type="button" class="btn btn-primary btn-lg btn-block" ng-click="get_plants(x.cat_id)">{{x.cat_name}}</button> </br>
<ul class="list-group">
<li class="list-group-item" ng-repeat="y in x.plant">{{y.plant_name}}</li>
</ul>
</div>
</div>
</body>
{{x.cat_name}
- {{y.plant\u name}
请注意，在x.plant中，第二次重复是
y$scope.x{"records":[{"plant_id":"1","plant_min_price":"300.00","plant_max_price":"","plant_short_description":"පඳුරු ගැටපිච්ච මල් සහිතව බන්දුන්ගතාකළ පැල","plant_description":"සුදු පැහැති මල් සහිත මධ්යම ප්රමාණයේ ගැට පිච්ච පැල කොම්පෝස්ට් පොහොර යොදා බඳුන් ගතකර ඇත.බිම සිටුවීමට හෝ බන්දුනේම තබා ගැනීමට උචිතය","plant_image_url":"https://s-media-cache-ak0.pinimg.com/736x/2e/38/ce/2e38ce89db5e470c8e6e527738fd18a5.jpg","plant_availability":"true","plant_name":"ගැට පිච්ච"},{"plant_id":"2","plant_min_price":"500.00","plant_max_price":"750.00","plant_short_description":"බඳුන් ගත කරන ලද රතු,කහ සහ සුදු අරලිය පැල","plant_description":"කොම්පෝස්ට් යොදා බඳුන් ගත කර ඇත. බන්දුනෙම තබා ගැනීමට වඩාත් සුදුසුය.","plant_image_url":"https://c1.staticflickr.com/5/4068/4258135709_d18a001c5b_o.jpg","plant_availability":"false","plant_name":"බේබි අරලිය"}]}
<body>
<div ng-app="cat_display" ng-controller="customersCtrl">
<div ng-repeat="x in plant_cat">
<button value={{x.cat_id}} type="button" class="btn btn-primary btn-lg btn-block" ng-click="get_plants(x.cat_id)">{{x.cat_name}}</button> </br>
<ul class="list-group">
<li class="list-group-item" ng-repeat="y in x.plant">{{y.plant_name}}</li>
</ul>
</div>
</div>
</body>