[英]How to display json in angularjs
I need help displaying json whos structure is like this in angular-js selector. 我需要帮助在angular-js选择器中显示json whos结构,就像这样。 I am a new to angular and and help displaying this as a drop down and making it a searchable is welcomed.
我是angular的新手,并欢迎将其显示为下拉列表并使其可搜索。
[
{
"id":1,
"name":"something1",
"displayName":"something1",
"children":[
{
"id":9,
"name":"something1Child1",
"displayName":"something1/ something1Child1",
"children":[
],
"typeId":1,
"parentId":1
},
{
"id":10,
"name":"something1Child2",
"displayName":"something1 / something1Child2",
"children":[
],
"typeId":1,
"parentId":1
}
]
}
{
"id":2,
"name":"something2",
"displayName":"something2",
"children":[
]
}
]
You just need a nested ng-repeat for the childrens. 您只需要为孩子们准备一个嵌套的ng-repeat。
<span ng-repeat="something in somethings">
<h3>{{ something.name }}</h3>
<select>
<option ng-repeat="child in something.children"> {{ child.name }}</option>
</select>
</span>
I am guessing how you want to display them but i hope it can give you some ideas. 我正在猜测您要如何显示它们,但我希望它能给您一些想法。 Here is a JsBin
这是一个JsBin
Does this JSFiddle do what you want? 这个JSFiddle会做什么吗? It takes your nested structure and makes a flat structure from it.
它采用您的嵌套结构并从中构造出平面结构。 It will then use that flat structure for display.
然后它将使用该平面结构进行显示。
<select ng-model="selected">
<option ng-repeat="option in tree" ng-bind-html-unsafe="option.displayName" value="{{$index}}">{{ option.displayName }}</option>
</select>
$scope.tree = [];
function buildTree(data, depth) {
for(d in data) {
var c = angular.copy(data[d]); //copy object
delete c['children']; //we dont want to copy children
c.displayName = Array(depth*4).join(" ") + c.displayName;
$scope.tree.push(c);
buildTree(data[d].children, depth+1);
}
}
buildTree($scope.data, 0);
I use ng-bind-html-unsafe
because you wanted to display it like a tree, I feel like that is best accomplished by adding whitespace before the nest option, which is done with the
我使用
ng-bind-html-unsafe
是因为您希望将其显示为一棵树,所以我认为最好通过在nest选项之前添加空格来完成此操作,该操作由
. 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.