我希望在Web应用程序中以树形结构显示数据.我希望使用Angular来完成这项任务.
看起来ng-repeat将允许我遍历节点列表,但是当给定节点的深度增加时,我怎么能进行嵌套呢？
我尝试了以下代码,但HTML的自动转义阻止了它的工作.另外,结束ul标签位置错误.
我很确定我完全以错误的方式解决这个问题.
有任何想法吗？
我正在尝试从JSON对象动态构建表单,该对象包含嵌套的表单元素组:
$scope.formData = [
{label:'First Name', type:'text', required:'true'},
{label:'Last Name', type:'text', required:'true'},
{label:'Coffee Preference', type:'dropdown', options: ["HiTest", "Dunkin", "Decaf"]},
{label: 'Address', type:'group', "Fields":[
{label:'Street1', type:'text', required:'true'},
{label:'Street2', type:'text', required:'true'},
{label:'State', type:'dropdown', options: ["California", "New York", "Florida"]}
]},
];
我一直在使用ng-switch块,但它对嵌套项变得难以维持,就像上面的Address对象一样.
这是小提琴:http: //jsfiddle.net/hairgamiMaster/dZ4Rg/
关于如何最好地处理这个嵌套问题的任何想法？非常感谢!
我试图按照这个SO答案解释如何使用指令呈现递归JSON结构.然而,与提供的答案,我的数据是不是在DOM加载和运行的角度,第一次知道.
相反,我的数据从HTML输入字段中检索并存储在Angular Service中(当用户提交表单时).
在修改服务数据时,如何使Angular Directive保持最新状态？
更新以回应答案
@musically_ut提供了一个很好的答案,但是却揭示了一个相关的问题,阻止了一个实现(在这里更新).
该指令呈现包含Angular的HTML,该Angular {{expressions}}访问存储在其中的数据$scope.因为最初的解决方案是$watch当服务准备好数据时.如何在指令渲染$scope 之前确保添加"新"数据？
架构和流程概述如下:
ControllerA - >从用户那里获得输入 ControllerA- >使用服务转换数据ControllerB- > $watch更改服务Directive- > $watch更改服务ControllerB - >添加数据 $scopeDirective- > 使用指令显示转换后的数据(来自服务)
问题出在步骤5和6之间.指令{{expressions}}在ControllerB添加数据之前呈现$scope.即使这确实有效,但感觉太复杂和"hacky".
实际上,为了回归,我正在使用$watchControllerB来监听转换后的数据何时在服务中准备就绪.即使这感觉有点矫枉过正(该服务不会进行异步调用).
我想知道设计一个关于性能的角度应用程序的最佳方法,用于构建具有可重用小部件(如标题,侧边栏,页脚等)的HTML模板.基本上,主要内容是中心DIV,其内容在路径之间变化,页眉和页脚几乎总是相同,侧边栏在某些页面中可能会有所不同.
--- index.html
<body ng-cloak>
<div data-ng-include data-src="'partials/template/header.html'"></div>
<div data-ng-include data-src="'partials/template/sidebar.html'"></div>
<div ng-view></div>
<div data-ng-include data-src="'partials/template/footer.html'"></div>
</body>
- header.html
<div id="header">
// ... HTML CONTENT
</div>
在$ templateCache中使用header.html会更好吗？例如:
- header.html
<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
<div id="header">
// ... HTML CONTENT
</div>
</scipt>
或者我应该为每个小部件使用指令,例如:<appHeader></appHeader>......？
哪一个在性能,内聚性,可重用性和可伸缩性方面更好,以便在每个屏幕上嵌入这些小部件？
performance angularjs angularjs-directive angularjs-ng-include
我正在研究一个模块,我将有div元素嵌套在div元素中,div元素也可以嵌套在div元素中.这些div元素将在用户单击按钮时创建.div可能最终看起来像这样:
DIV1
1.1.DIV2
1.2.DIV3
1.3.DIV4
1.3.1 div5
1.3.2 div6
2.div7
3.div8
等等......
这些div中的每一个都只是一个html模板,我想绑定每个div的数据,比如div有一个标题,所以我将绑定每个div.
我的第一个行动计划是使用ng-include并简单地由用户动态创建ng-includes,这样模板将通过ng-include加载.但是,正如我所知,由于依赖性问题,嵌套的ng-includes是不可能的.
我知道那些试图破解ng-includes嵌套的用户熟悉的库,但我正在寻找嵌套模板的好习惯,同时远离额外的库.
关于什么是动态嵌套模板的最佳方法的任何建议？
我正在尝试使用angularJS做一个递归菜单,但我不断收到错误:超出最大调用堆栈大小
我的指示:
angular.module("application").directive("navigation", [function () {
return {
restrict : 'E',
replace : true,
scope : {
menu : '='
},
template : '<ul><navigation-item ng-repeat="item in menu" submenu="item"></navigation-item></ul>',
link : function ($scope, elem, attrs) {}
}
}
]);
angular.module("application").directive("navigationItem", [function () {
return {
restrict : 'E',
replace : true,
scope : {
submenu : '='
},
template : '<li>{{ submenu }}<navigation menu="submenu.Children"></navigation></li>',
link : function ($scope, elem, attrs) {}
}
}
]);
我的控制器:
app.controller('myController', ['$scope', function (ng) { …有一些流行的递归角度指令Q&A在那里.一个优雅的解决方案是将递归功能抽象为服务并在指令'compile'阶段调用它:
如果我想在新的Angular 1.5 .component()而不是.directive()中使用相同的概念,最好的方法是什么？
recursion angularjs angularjs-directive angularjs-components
我有社交媒体统计的对象.我正在尝试将它们重复到表格中.这是我的傻瓜.
HTML:
<table>
<tr ng-repeat="(metric, metricData) in data">
<td>{{metric}}</td>
<td>{{metricData}}</td>
</tr>
</table>
控制器对象:
$scope.data = { buzz:0,
Delicious:121,
Facebook:
{
like_count: "6266",
share_count: "20746"
},
GooglePlusOne:429,
LinkedIn:820,
Twitter:4074
};
当我到达Facebook结果时遇到问题.在<td>整个对象中显示(因为它应该与我如何设置我的代码).但我宁愿发生的是重复该对象并显示单元格中的键和值.
我尝试做一些事情,看看是否metricData是一个对象,并做了某种ng-repeat.但我没有运气.关于如何在单元格中显示内部对象(键和值)的任何想法？