Verschachtelte Liste in Angular JS - Cant herauszufinden, wie zu tun

Ich bin extrem Newbe für angular JS.Verschachtelte Liste in Angular JS - Cant herauszufinden, wie zu tun

Im Erstellen einer einfachen Web-App, um angular JS zu lernen.

Ich habe eine Hauptliste, die verschiedene Kategorien von Pflanzen enthält. Zum Beispiel Obst, Gemüse usw. Um diese Daten aus der MySQL-Datenbank zu bekommen, verwende ich ein PHP-Skript.

Wenn Klicks auf eine Kategorie verwendet wird, muss ich eine Liste erweitern, die Namen der Pflanzen in dieser Kategorie enthält. Wenn der Benutzer beispielsweise auf "Früchte" klickt, wird eine Liste mit "Mango", "Apple", "Banana" usw. erweitert. Dies geschieht auch durch ein PHP-Skript. Für das Skript muss ich die Kategorie ID als URL-Parameter übergeben

EG. select_category.php? cat_id = 1

Schluss Liste sollte wie

Früchte
- Mango
- Banana folgen sein
- Apple-
Gemüse
herbals

Folgendes zeigt die HTML/JS-Seite, die ich verwende.

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

Aber dies ist nicht wie erwartet funktioniert.

Wenn ich auf eine Kategorie klicke, erweitern Sie alle Listen.

Ich habe alle die meisten Beispiele in Stack Overflow versucht. Ich hatte kein Glück, weil mein Szenario völlig anders ist. In meinem Fall muss ich einen Parameter an das PHP-Skript senden, um die notwendigen Daten auszuwählen.

Bitte helfen Sie mir, dies herauszufinden.

Dies ist die JSON, die durch select_plant_cat.PHP (Select * Pflanzen Kategorien) erzeugt

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

Diese JSON ist, die von select_plant.PHP generierte? Cat_id = 1 (Select * Anlagen, in denen 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":"බේබි අරලිය"}]}

Vielen Dank.

Quelle

2016-09-18 Sandaru

Ist es zu ihren Kategorien Addition aller Pflanzen ist, oder ist es das Hinzufügen 1 Pflanzentyp in alle Kategorien? –

Wenn Sie eine Kategorie auswählen, listet sie alle Pflanzen auf, die in dieser Kategorie verfügbar sind. – Sandaru

Ja, aber Sie haben gesagt: "Wenn ich auf eine Kategorie klicke, werden alle Listen erweitert." Das kann mehrere Ursachen haben –

Sie wollen wiederholen in einer der Anordnungen in der Wiederholungs Array so muss der Code sein:

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

Mitteilung die zweite Wiederholung y in x.plant

Quelle

2016-09-18 06:00:48

Ich habe es geändert .. und auch das JS-Skript wie folgt $ scope.get_plants = function (cat_id) { alert (cat_id); $ http.get ("http: // localhost: 8080/Aggry/select_plant.php? Cat_id =" + cat_id) .dann (funktion (antwort) { alert (response.data.records); $ scope. x.plant = response.data.records; }); } aber es funktioniert nicht :( – Sandaru

Es sagt "angular.js: 12520TypeError: Kann Eigenschaft" Anlage "von undefined nicht festlegen, wenn ich die Konsole überprüfe – Sandaru

Weil' $ scope.x' existiert nicht –

Verschachtelte Liste in Angular JS - Cant herauszufinden, wie zu tun

Antwort

Verwandte Themen