ショッピング カートのカテゴリをツリー構造のように表示したいと考えています。親要素をクリックするul>liと、サーバーからデータが取得され、新しいデータ セットが動的に追加されます。最初に最初のレベルをクリックすると、動的な子セットが作成され、クラス名を使用して親の下に配置されます。新しく作成された子に対して同じ関数が呼び出されますが、今回はクリックされた要素のスーパー親を更新します。詳細な説明のためにプランカーを作成しました 。
men カテゴリをクリックすると、その子要素に次のものが取り込まれます。
- 男性用腕時計
- シャツ
「男性用腕時計」をクリックすると、その下に次のレベルが追加されますが、既存のデータが上書きされます。
私を助けてください。私は角度が初めてです。
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul class="navigation">
<li ng-repeat='category in fullTree.category[0]' ng-class='category.category_id' ng-click='dropmenu(category.category_id,category.level,category.has_child_category,$event);event.stopImmediatePropagation()'>
<p>{{category.category_name}} <i class="ion-chevron-down"></i>
</p>
</li>
</ul>
</body>
</html>
脚本：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce, $compile) {
$scope.name = 'World';
$scope.html = "";
$scope.htmlElement = function() {
var html = "<input type='text' ng-model='html'></input>";
return $sce.trustAsHtml(html);
}
$scope.fullTree = {
"result": "true",
"success": 1,
"category": [
[{
"category_id": "prdcat01",
"category_name": "Men",
"level": "1",
"higher_level_catg_no": "0",
"total_level": "3",
"has_child_category": "true",
"total_product": "0"
}, {
"category_id": "prdcat02",
"category_name": "Women",
"level": "1",
"higher_level_catg_no": "0",
"total_level": "3",
"has_child_category": "true",
"total_product": "0"
}, {
"category_id": "prdcat03",
"category_name": "Kids",
"level": "1",
"higher_level_catg_no": "0",
"total_level": "1",
"has_child_category": "false",
"total_product": "0"
}],
[{
"category_id": "cat01c01",
"category_name": "Wrist Watch For Men",
"level": "2",
"higher_level_catg_no": "prdcat01",
"has_child_category": "true",
"total_product": "1"
}, {
"category_id": "cat02c01",
"category_name": "Wrist Watch For Women",
"level": "2",
"higher_level_catg_no": "prdcat02",
"has_child_category": "true",
"total_product": "0"
}, {
"category_id": "cat01c02",
"category_name": "Shirt for men",
"level": "2",
"higher_level_catg_no": "prdcat01",
"has_child_category": "false",
"total_product": "0"
}, {
"category_id": "cat02c02",
"category_name": "Shirt For Women",
"level": "2",
"higher_level_catg_no": "prdcat02",
"has_child_category": "false",
"total_product": "0"
}],
[{
"category_id": "cat0101c01",
"category_name": "Fastrack Watch For Men",
"level": "3",
"higher_level_catg_no": "cat01c01",
"has_child_category": "false",
"total_product": "0"
}, {
"category_id": "cat0201c01",
"category_name": "Fastrack Watch For Women",
"level": "3",
"higher_level_catg_no": "cat02c01",
"has_child_category": "false",
"total_product": "1"
}, {
"category_id": "cat0101c02",
"category_name": "Casio watch for men",
"level": "3",
"higher_level_catg_no": "cat01c01",
"has_child_category": "false",
"total_product": "1"
}]
],
"msg": "Data retrieved successfuly"
};
$scope.dropmenu = function(category_id, level, has_child_category, $event) {
$event.stopPropagation();
$scope.dummy = [];
for (var i = 0; i < $scope.fullTree.category[level].length; i++) {
if ($scope.fullTree.category[level][i].higher_level_catg_no == category_id) {
$scope.dummy.push($scope.fullTree.category[level][i]);
}
}
alert(JSON.stringify($scope.dummy))
var fieldHtml = "<ul class='navigation'><li ng-class={{category.category_id}} ng-repeat='category in dummy' ng-click='dropmenu(category.category_id,category.level,category.has_child_category,$event);event.stopPropagation()'><p>{{category.category_name}} <i class='ion-chevron-down'></i></p></li></ul>";
var compiledElement = $compile(fieldHtml)($scope);
$($event.target).closest("." + category_id).append(compiledElement);
}
});