我是angularJS和Javascript的新手。我试图在树结构中打印JSON对象。为此，我从JSFiddle中选择了一些代码 http://jsfiddle.net/eu81273/8LWUc/18/
即使使用我的JSON，代码在JSFiddle上运行良好。但是当我试图在我的系统中运行时，它正在显示[[object HTMLUListElement]]。
下面的是js.js -
myApp.controller('viewController', ["$scope", "$http", "$stateParams", function($scope, $http, $stateParams) {
var req = {
method: 'GET',
url: "/DDOEnvDashboard/getDetails/getEnvironmentDetails/?_envName=" + $stateParams.envId,
headers: {
'Content-Type': 'application/json',
'dataType': 'json'
}
};
$http(req).
success(function(data, status, headers){
$scope.roleList = [{"data": "dev",
"incrementalPath": "dev",
"children": [{"data": "SERVER2",
"incrementalPath": "dev|SERVER2",
"children": [{"data": "CLUSTER2",
"incrementalPath": "dev|SERVER2|CLUSTER2",
"children": [{"data": "APPLICATION1",
"incrementalPath": "dev|SERVER2|CLUSTER2|APPLICATION1",
"children": []
}]
},
{"data": "CLUSTER1",
"incrementalPath": "dev|SERVER2|CLUSTER1",
"children": [{"data": "APPLICATION2",
"incrementalPath": "dev|SERVER2|CLUSTER1|APPLICATION2",
"children": []
},
{"data": "APPLICATION1",
"incrementalPath": "dev|SERVER2|CLUSTER1|APPLICATION1",
"children": []
}]
},
{"data": "CLUSTER3",
"incrementalPath": "dev|SERVER2|CLUSTER3",
"children": [{"data": "APPLICATION3",
"incrementalPath": "dev|SERVER2|CLUSTER3|APPLICATION3",
"children": []
},
{"data": "APPLICATION2",
"incrementalPath": "dev|SERVER2|CLUSTER3|APPLICATION2",
"children": []
},
{"data": "APPLICATION1",
"incrementalPath": "dev|SERVER2|CLUSTER3|APPLICATION1",
"children": []
}]
}]
},
{"data": "SERVER1",
"incrementalPath": "dev|SERVER1",
"children": [{"data": "CLUSTER1",
"incrementalPath": "dev|SERVER1|CLUSTER1",
"children": [{"data": "APPLICATION2",
"incrementalPath": "dev|SERVER1|CLUSTER1|APPLICATION2",
"children": []
},
{"data": "APPLICATION1",
"incrementalPath": "dev|SERVER1|CLUSTER1|APPLICATION1",
"children": []
},
{"data": "APPLICATION3",
"incrementalPath": "dev|SERVER1|CLUSTER1|APPLICATION3",
"children": []
}]
},
{"data": "CLUSTER2",
"incrementalPath": "dev|SERVER1|CLUSTER2",
"children": [{"data": "APPLICATION2",
"incrementalPath": "dev|SERVER1|CLUSTER2|APPLICATION2",
"children": []
},
{"data": "APPLICATION1",
"incrementalPath": "dev|SERVER1|CLUSTER2|APPLICATION1",
"children": []
}]
}]
}]
}];
}).
error(function(jqXHR, textStatus, errorThrown){
alert('There is some internal error. Please try again later.');
});}]);
angular.treeview.js文件如下：
(function(f) {
f.module("angularTreeview", []).directive("treeModel", function($compile) {
return {
restrict: "A",
link: function(a, g, viewparams) {
var treemodel=viewparams.treeModel,
nodelabel=viewparams.nodeLabel||"label",
nodechildren=viewparams.nodeChildren||"children",
divhtml='<ul><li data-ng-repeat="node in '+treemodel+'"><i class="collapsed" data-ng-show="node.'+nodechildren+'.length && node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="expanded" data-ng-show="node.'+nodechildren+'.length && !node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="normal" data-ng-hide="node.'+nodechildren+'.length"></i> <span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">{{node.'+nodelabel+'}}</span><div data-ng-hide="node.collapsed" data-tree-model="node.'+nodechildren+'" data-node-id='+(viewparams.nodeId||"id")+" data-node-label="+nodelabel+" data-node-children="+nodechildren+"></div></li></ul>";
treemodel && treemodel.length && (viewparams.angularTreeview?(
a.$watch(treemodel,function(m,b){g.empty().html($compile(divhtml)(a))}, !1),
a.selectNodeHead=a.selectNodeHead||function(a,b){
b.stopPropagation&&b.stopPropagation();
b.preventDefault&&b.preventDefault();
b.cancelBubble=!0;
b.returnValue=!1;
a.collapsed=!a.collapsed
},
a.selectNodeLabel=a.selectNodeLabel||function(viewparams,b){
b.stopPropagation&&b.stopPropagation();
b.preventDefault&&b.preventDefault();
b.cancelBubble=!0;
b.returnValue=!1;
a.currentNode&&a.currentNode.selected&&(
a.currentNode.selected=void 0
);
viewparams.selected="selected";
a.currentNode=viewparams
}):g.html($compile(divhtml)(a)))
}
}
})})(angular);
html页面是：
`
<div ng-app="myApp"><div ng-controller="viewController">
<div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;"><span><b>Selected Node</b> : {currentNode.data}}</span></div>
<div
data-angular-treeview="true"
data-tree-model="roleList"
data-node-id="incrementalPath"
data-node-label="data"
data-node-children="children" >
</div>
</div>
</div>`
我已将两个JS脚本链接到索引html文件中。如何以树形结构显示数据？
提前致谢。
答案 0 :(得分：0)
因为它在输出中显示[[object HTMLUListElement]]，所以脚本运行正常。您需要包含jquery.min.js才能显示树状视图。在 HTML 页面中包含JQuery库。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
js.js文件中也缺少初始化模块的行。
//angular module
var myApp = angular.module('myApp', ['angularTreeview']);
修改：在.success功能中，添加以下第一行：
$scope.roleList = $scope.roleList;