Angular JS의 중첩 목록 - 수행 방법 알아보기

나는 각도 JS에 매우 새롭다.Angular JS의 중첩 목록 - 수행 방법 알아보기

각도 JS를 배우기 위해 간단한 웹 앱을 만듭니다.

나는 식물의 다양한 범주를 포함하는 주요 목록이 있습니다. 예를 들어 Fruits, Vegetables 등 .. MySQL 데이터베이스에서이 데이터를 가져 오려면 PHP 스크립트를 사용하고 있습니다.

카테고리를 클릭하면 해당 카테고리의 식물 이름이 포함 된 목록을 확장해야합니다. 예를 들어 사용자가 'Fruits'를 클릭하면 "Mango", "Apple", "Banana"등이 포함 된 목록이 펼쳐집니다. 이것은 PHP 스크립트에서도 수행됩니다. 스크립트의 경우 카테고리 ID를 URL 매개 변수로 전달해야합니다.

EG.

과일
- 망고
- 바나나
- 애플
야채

최종 목록은해야한다

약초

다음은 내가 사용중인 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 (SELECT * 식물 종류) 이것에 의해 생성 된 인 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? 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":"බේබි අරලිය"}]}

감사합니다.

출처

2016-09-18 Sandaru

가 자신의 범주에 모든 식물을 추가하거나이 추가된다 모든 카테고리에 1 개의 식물 유형? –

카테고리를 선택하면 해당 카테고리에서 사용 가능한 모든 식물이 나열됩니다. – Sandaru

예, 그렇습니다 : "한 카테고리를 클릭하면 모든리스트가 확장됩니다." 이것은 복수의 원인이있을 수 있습니다 –

당신은 코드가 반복 배열의 배열 중 하나 싶어 반복해야하므로 :

<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

출처

2016-09-18 06:00:48

나는 그것을 변경했다 .. 또한 JS 스크립트는 다음과 같이 $ scope.get_plants = function (cat_id) { alert (cat_id); $ http.get ("http : // localhost : 8080/Aggry/select_plant.php? cat_id ="+ cat_id) .then (function (response) { alert (response.data.records); $ scope. x.plant = response.data.records; }); }하지만 작동하지 않습니다 : ( – Sandaru

"angular.js : 12520TypeError : 콘솔을 검사 할 때 'plant'가 정의되지 않은 '식물'을 설정할 수 없습니다. – Sandaru

'$ scope.x'가 존재하지 않기 때문에 –

Angular JS의 중첩 목록 - 수행 방법 알아보기

답변

관련 문제