Angularjs 显示原始值的角度ui树（即直接打印来自SpringMVC的json数据）
这是我的tree.jspAngularjs 显示原始值的角度ui树（即直接打印来自SpringMVC的json数据）,angularjs,spring-mvc,Angularjs,Spring Mvc,这是我的tree.jsp <html> <head> <link rel="stylesheet" href="resources/css/style.css" /> <script src="resources/js/controller/AutoConfigController.js"></script> <script src="demo/jquery.2.0.3.js"></script>
<html>
<head>
<link rel="stylesheet" href="resources/css/style.css" />
<script src="resources/js/controller/AutoConfigController.js"></script>
<script src="demo/jquery.2.0.3.js"></script>
<script src="demo/angular.1.2.29.js"></script>
<script src="demo/bootstrap.3.1.1.js"></script>
<script src="demo/ui-bootstrap-tpls.0.11.2.js"></script>
<script src="demo/prettify.1.0.1.js"></script>
<link href="demo/bootstrap.3.1.1.css" rel="stylesheet" type="text/css">
<link href="demo/prettify-style.css" rel="stylesheet" type="text/css">
<script src="angular-tree-control.js"></script>
<link rel="stylesheet" type="text/css" href="css/tree-control.css">
<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">
<style type="text/css">
.header {
padding-top: 50px;
padding-bottom: 50px;
background-color: #444980;
}
.head-container {
width: 1140px;
margin: auto;
}
.header h1 {
color: #fffffa;
font-size: 60px
}
.header h2 {
color: #fffffa;
font-size: 24px;
font-style: normal
}
.example-caption {
color: #bbb;
font-size: 12px
}
.docs-body {
width: 1140px;
margin: auto auto 50px;
}
.docs-footer {
background-color: #F5F5F5;
text-align: center;
padding: 30px 0;
border-top: #e5e5e5
}
.tab-pane {
background-color: #f8f8f8;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.nav li.active a {
background-color: #f8f8f8
}
pre.code {
border: none;
background-color: #f8f8f8;
padding: 10px;
margin: 0;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.docs-sidenav {
margin-top: 45px;
margin-bottom: 0;
}
.docs-sidenav>li>a {
display: block;
font-size: 13px;
font-weight: 500;
color: #999;
padding: 4px 20px;
}
.docs-sidenav>li.active>a {
font-weight: 700;
color: #563d7c;
border-left: 2px solid #563d7c;
padding-left: 18px;
}
.docs-sidenav>li>a:hover {
background-color: transparent;
color: #563d7c;
border-left: 1px solid #563d7c;
padding-left: 19px;
}
.type-hint-object {
background: #999;
}
.type-hint-boolean {
background: rgb(18, 131, 39);
}
.type-hint-number {
background: rgb(189, 63, 66);
}
body, html {
background: none !important;
background-image: none !important;
}
#mydiv {
position: fixed;
top: 30%;
left: 25%;
width: 30em;
height: 18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
background-color: #f3f3f3;
}
</style>
<body ng-controller="AutoConfigController">
<div id="mydiv">
<form>
<div>
<input id="treeSearchText" type="text" />
<button id="searchTree" class="btn">Search</button>
</div>
</form>
<treecontrol class="tree-classic" tree-model="techList" on-selection="showSelected(node)">
{{techList}}
</treecontrol>
<script>
angular.module('SuperAdminReveal')
.directive('treeControl', function () {
return {
template: '<div class="treeControl" ng-transclude></div>',
restrict: 'E',
replace: true,
transclude: true,
link: function postLink(scope, element, attrs) {
element.bind('click', function (e) {
if (e.target.tagName === "LI" && e.target.childElementCount) {
$(e.target).toggleClass('collapsed');
}
})
}
};
});
</script>
</body>
</html>
.标题{
填充顶部：50px；
填充底部：50px；
背景色：#444980；
}
.头部容器{
宽度：1140px；
保证金：自动；
}
.标题h1{
颜色：#FFFFF A；
字体大小：60px
}
.标题h2{
颜色：#FFFFF A；
字体大小：24px；
字体：普通
}
.示例标题{
颜色：#bbb；
字号：12px
}
.文件正文{
宽度：1140px；
保证金：自动50px；
}
.docs页脚{
背景色：#F5；
文本对齐：居中；
填充：30px0；
边框顶部：#e5
}
.选项卡窗格{
背景色：#F8；
右边框：1px实心#ccc；
左边框：1px实心#ccc；
边框底部：1px实心#ccc；
边框左下半径：3px；
边框右下半径：3px
}
李海军{
背景色：#F8
}
预编码{
边界：无；
背景色：#F8；
填充：10px；
保证金：0；
字体系列：Consolas，‘解放Mono’、Courier、monospace；
}
.docs sidenav{
边缘顶部：45像素；
页边距底部：0；
}
.docs sidenav>li>a{
显示：块；
字体大小：13px；
字号：500；
颜色：#999；
填充：4px20px；
}
.docs sidenav>li.active>a{
字号：700；
颜色：#563d7c；
左边框：2px实心#563d7c；
左侧填充：18px；
}
.docs sidenav>li>a:悬停{
背景色：透明；
颜色：#563d7c；
左边框：1px实心#563d7c；
左侧填充：19px；
}
.type提示对象{
背景：#999；
}
.type提示布尔值{
背景：rgb（18,131,39）；
}
.键入提示编号{
背景：rgb（189,63,66）；
}
正文，html{
背景：无！重要；
背景图像：无！重要；
}
#mydiv{
位置：固定；
最高：30%；
左：25%；
宽度：30em；
高度：18em；
页边距顶部：-9em；/*设置为身高的负数1/2*/
左边距：-15em；/*设置为宽度的负数1/2*/
背景色：#F3；
}
搜寻
{{techList}}
angular.module（'SuperAdminReveal'）
.指令（'treeControl'，函数（）{
返回{
模板：“”，
限制：'E'，
替换：正确，
是的，
链接：函数postLink（范围、元素、属性）{
元素绑定（'click'，函数（e）{
if（e.target.tagName==“LI”&&e.target.childElementCount）{
$（e.target）.toggleClass（'collapsed'）；
}
})
}
};
});
package com.reveal.web.controller;
import java.util.List;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.reveal.web.controller.EnsureCapacity.Technology;
@Controller
public class TreesController {
@RequestMapping(value="/mytree",method = RequestMethod.GET)
public String printWelcome(ModelMap model) {
return "tree";
}
@RequestMapping(value = "/getTechList", method = RequestMethod.GET,produces = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody List<EnsureCapacity.Technology> getTechList(){
EnsureCapacity ensureCapacity = new EnsureCapacity();
List<EnsureCapacity.Technology> techList = ensureCapacity.getTechList();
return techList;
}
}
output:
package com.reveal.web.controller；
导入java.util.List；
导入org.springframework.http.MediaType；
导入org.springframework.stereotype.Controller；
导入org.springframework.ui.ModelMap；
导入org.springframework.web.bind.annotation.RequestMapping；
导入org.springframework.web.bind.annotation.RequestMethod；
导入org.springframework.web.bind.annotation.ResponseBody；
导入com.reveal.web.controller.ensurecapity.Technology；
@控制器
公共类树控制器{
@RequestMapping（value=“/mytree”，method=RequestMethod.GET）
公共字符串printWelcome（ModelMap模型）{
返回“树”；
}
@RequestMapping（value=“/getTechList”，method=RequestMethod.GET，products=MediaType.APPLICATION\u JSON\u value）
public@ResponseBody List getTechList（）{
EnsureCapity EnsureCapity=新EnsureCapacity（）；
List techList=ensureCapacity.getTechList（）；
返回技术列表；
}
}
输出：
//更新下面的树控制
// Update tree control below
<treecontrol class="tree-classic" tree-model="techList" on-selection="showSelected(node)">
{{node.techName}} ({{node.id}} ) {{$index}}
</treecontrol>
{{node.techName}{{node.id}}{{$index}}