【发布时间】：2014-05-24 08:11:55
【问题描述】：
我想像树状结构一样展示购物车类别。当我单击父 ul>li 元素时，它会从服务器获取数据并动态添加新的数据集。我有 n 个级别，最初当我单击第一个级别时，我创建了一个动态子集并使用其类名将其放在父级之下。为新创建的子元素调用相同的函数，但这次它更新了单击元素的超级父元素。我创建了一个plunker 进行详细说明。
当我点击 men 类别时，其子元素会填充：
- 男士腕表
- 衬衫
当我点击“男士腕表”时，它应该在其下方添加下一个级别 - 但它会覆盖现有数据。
请帮助我。我是 Angular 新手。
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);
}
});
【问题讨论】：
标签： jquery angularjs ionic-framework