AngularJS ng-对于JSON包含字符串或相同属性的数组。
AngularJS ng-对于JSON包含字符串或相同属性的数组。
提问于 2016-02-16 06:50:19
我有一个JSON数据，即$scope.family，它包含family.name和可选的family.child
app.controller('test', function ($scope) {
$scope.family = [
{
"name": "Siva",
"child": [
{
"name": "Suriya"
},
{
"name": "Karthick"
}
]
},
{
"name": "Kumar",
"child": [
{
"name": "Rajini"
},
{
"name": "Kamal"
},
{
"name": "Ajith"
}
]
},
{
"name": "Samer",
"child": "Ranjan"
},
{
"name": "Mahesh",
"child": "Babu"
},
{
"name": "Joseph"
}
];
});病例
- 如果
family.child有一个子名称，则名称直接赋值为字符串。 - 如果
family.child有多个子元素，则名称被赋值为带有属性family.child.name的字符串数组。 - 如果
family.child不在集合中，只需显示family.name
我的预期输出UI是
- Siva
- 苏里亚
- 卡鲁普
- 库马尔
- 拉吉尼
- 卡迈勒
- 阿吉思
- Samer
- 兰詹
- 马赫什
- 巴布
- 约瑟夫
我的HTML源代码(我无法从这段代码中获得预期的输出)
<ul>
<li ng-repeat="member in family">
{{ member.name }}
<div class="liststyling" ng-if="member.child.length > 0">
<ul>
<li ng-repeat="chdMember in member.child>
{{ chdMember.name }}
</li>
</ul>
</div>
</li>
</ul>请帮助我..。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-02-16 07:12:36
下面是代码JSFiddle的一个简单运行版本(不是最佳编码实践)
请记住，至少应该使用AngularJS 1.1.15版本来使用ng-if。
您应该简单地整理一下您的脚本，它会工作的：
HTML：
<body ng-app="myApp">
<div ng-controller="ctrl">
<ul>
<li ng-repeat="member in family">
<h2>
{{ member.name }}
</h2>
<div class="liststyling" ng-if="member.child.length > 0">
<ul>
<li ng-repeat="chdMember in member.child">
{{ chdMember.name }}
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>Javascript：
var app = angular.module('myApp',[]);
app.controller('ctrl', MyCtrl);
function MyCtrl($scope) {
$scope.family = [
{
"name": "Siva",
"child": [
{
"name": "Suriya"
},
{
"name": "Karthick"
}
]
},
{
"name": "Kumar",
"child": [
{
"name": "Rajini"
},
{
"name": "Kamal"
},
{
"name": "Ajith"
}
]
},
{
"name": "Samer",
"child": [{name:"Ranjan"}]
},
{
"name": "Mahesh",
"child": []
},
{
"name": "Joseph"
}
];
}Stack Overflow用户
发布于 2016-02-16 07:37:24
为实际输出尝试此方法。
<ul>
<li ng-repeat="member in family">
{{ member.name }}
<div class="liststyling">
<ul>
<li ng-repeat="chdMember in member.child">
{{ chdMember.name }}
</li>
</ul>
</div>
</li>
</ul>
$scope.family = [
{
"name": "Siva",
"child":
[
{
"name": "Suriya"
},
{
"name": "Karthick"
}
]
},
{
"name": "Kumar",
"child": [
{
"name": "Rajini"
},
{
"name": "Kamal"
},
{
"name": "Ajith"
}
]
},
{
"name": "Samer",
"child": [{name:"Ranjan"}]
},
{
"name": "Mahesh",
"child": [{name:"Babu"}]
},
{
"name": "Joseph",
"child": []
}
];Stack Overflow用户
发布于 2016-02-16 07:42:23
请参考这里的小提琴。您需要在模型和循环中使用新的修改模型- newFamily而不是family进行一些更改。
HTML:
<div ng-app="app" ng-controller="test">
<ul>
<li ng-repeat="member in newFamily">
{{ member.name }}
<div class="liststyling" ng-if="member.child.length > 0">
<ul>
<li ng-repeat="chdMember in member.child track by $index">
{{ chdMember.name }}
</li>
</ul>
</div>
</li>
</ul>
</div>JS:
var app = angular.module('app', []);
app.controller('test', function ($scope) {
$scope.family = [
{
"name": "Siva",
"child": [
{
"name": "Suriya"
},
{
"name": "Karthick"
}
]
},
{
"name": "Kumar",
"child": [
{
"name": "Rajini"
},
{
"name": "Kamal"
},
{
"name": "Ajith"
}
]
},
{
"name": "Samer",
"child": "Ranjan"
},
{
"name": "Mahesh",
"child": "Babu"
},
{
"name": "Joseph"
}
];
$scope.newFamily = [];
angular.forEach($scope.family, function (v, k) {
var existingChildArray = v.child;
var newChildArray = [];
if (!angular.isArray(v.child) && v.child) {
newChildArray.push({ 'name': v.child });
}
var addChild = newChildArray.length > 0 ? newChildArray : existingChildArray;
$scope.newFamily.push({ 'name': v.name, 'child': addChild });
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35425653
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号