Question

我非常喜欢角度JS。

我正在创建一个简单的Web应用程序来学习角度JS。

我有一个包含各种植物类别的主列表。例如，水果，蔬菜等......使用PHP脚本从MySQL数据库中获取这些数据。

当使用点击某个类别时，我需要展开一个包含该类别中植物名称的列表。例如，如果用户点击了“水果”。它扩展了一个包含＆＃34; Mango＆＃34;，＆＃34; Apple＆＃34;，＆＃34; Banana＆＃34;等等。这也是由PHP脚本完成的。对于脚本，我需要将类别ID作为URL参数传递

EG。 select_category.php？CAT_ID = 1

最终列表应该如下

水果
- 芒果
- 香蕉
- 苹果
蔬菜
草药

以下显示了我正在使用的HTML / JS页面。

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

但这并没有像预期的那样发挥作用。

当我点击一个类别时，它会展开所有列表。

我已经尝试了堆栈溢出中的所有大多数示例。我没有运气，因为我的情况完全不同。在我的情况下，我需要向PHP脚本发送一个参数来选择必要的数据。

请帮我弄明白。

这是由select_plant_cat.PHP（选择*工厂类别）生成的JSON

{"records":[{"cat_id":"1","cat_name":"විසිතුරු මල්"},{"cat_id":"2","cat_name":"ඖෂධිය පැල"},{"cat_id":"3","cat_name":"පලතුරු පැල"},{"cat_id":"4","cat_name":"එළවලු පැල"}]}

这是由select_plant.PHP生成的JSON？cat_id = 1（选择*植物，其中cat_id = 1）

{"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":"බේබි අරලිය"}]}

谢谢。

Answer 1

你想在重复数组中的一个数组中重复，所以代码必须是：

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

注意第二个重复是y in x.plant

Angular JS中的嵌套列表 - 无法弄清楚如何操作

1 个答案: