个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试找到一种使用 ng-repeat 和 ng-if 以列表(UL、LI)形式显示以下 JSON 数据的方法。但作为 Angular JS 的新手，由于下面的 JSON 数据结构( Controller 中的 schemaJsonData)，它看起来很复杂:
JSON 数据结构为:
Connections[
{ /* For each connection we have multiple databases*/
databases[
{ /* For each Database we have tables, view, storedProcedures adn functions*/
tables[
table[ /* For each table group of columns, indexes, etc */
columns[], indexes[], foreignKeys[], triggers[]
] /*end of table*/ ,
],/*end of tables*/
views [
], /*end of views*/
storedProcedures [
], /*end of storedProcedures*/
functions [
], /*end of functions*/
}
] /* end of databases */
}
] /* end of connections */
我的代码如下:
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="(key,value) in schemaData">
<div ng-if="isArray(value)">
</div>
<div ng-if="!isArray(value)">
<ul> {{value}} </ul>
</div>
<li >
<ul ng-if="isArray(value)">
{{value}}
</ul>
<ul ng-if="!isArray(value)">
{{value}}
</ul>
</li>
</ul>
</div>
<script src="lib/angular/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var schemaJsonData = {
"connectionName":"connection",
"connections":[
{
"name":"connection",
"databases":[
{
"name":"information_schema",
"tables":[
],
"views":[
],
"storedProcedures":[
],
"functions":[
]
},
{
"name":"mysql",
"tables":[
],
"views":[
],
"storedProcedures":[
],
"functions":[
]
},
{
"name":"performance_schema",
"tables":[
],
"views":[
],
"storedProcedures":[
],
"functions":[
]
},
{
"name":"timetrack",
"tables":[
{
"name":"employee",
"columns":[
{
"name":"idemployee"
},
{
"name":"name"
},
{
"name":"salary"
},
{
"name":"age"
}
],
"indexes":[
],
"foreignKeys":[
],
"triggers":[
]
},
{
"name":"work",
"columns":[
{
"name":"id"
},
{
"name":"hours"
},
{
"name":"date"
},
{
"name":"archived"
},
{
"name":"description"
}
],
"indexes":[
],
"foreignKeys":[
],
"triggers":[
]
}
],
"views":[
],
"storedProcedures":[
],
"functions":[
]
}
]
}
]
};
$scope.schemaData = schemaJsonData;
$scope.isArray = angular.isArray;
});
</script>
</body>
</html>
问题是:
1)我可以使用 ng-repeat 和 ng-if 并且我可以检查它是否是数组
2)但是由于结构可以改变，我想编写一个简单的代码来循环遍历JSON数据，如果它是数组，那么循环遍历数组并再次相同(我的意思是，在循环中，如果我们得到数组再次，然后再次循环)。
最佳答案
我搜索了一段时间来回答我的问题，说实话，Angular JS 让事情变得复杂而有趣。最后，我找到了一些问题的解决方案，我正在更新答案，这样，它对像我这样的其他人可能会有所帮助:
首先感谢 Poyraz Yilmaz 和 Muli Yulzary(他对如何解决这个问题感兴趣:))
解决方案:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var schemaJsonData =[{
"name": "myConnection",
"databases": [{
"name": "informationDB",
"tables": [{
"name": "info",
}, {
"name": "table2",
}]
}]
},{
"name": "yourConnection",
"databases": [{
"name": "empDB",
"tables": [ {
"name": "employee",
"columns": [
{"name": "empsalary"},
{"name": "abc"},
{"name": "def"},
]
}]
}]
}];
$scope.schemaData = schemaJsonData;
$scope.isString = angular.isString;
$scope.isNumber = angular.isNumber;
$scope.isArray = angular.isArray;
$scope.isObject = angular.isObject;
$scope.searchKeyword = [];
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<!-- <link rel="stylesheet" href="style.css" /> -->
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" placeholder="Search" ng-model="searchKeyword">
<ul>
<li ng-repeat="(key, item) in schemaData" ng-include="'list.html'">
</li>
</ul>
</body>
<script type="text/ng-template" id="list.html">
<div ng-if="isObject(item)">
<div ng-repeat="(key1, item1) in item">
<div ng-if="key1 == 'name'">
<li>{{item1}}</li>
</div>
<div ng-if="isArray(item1)">
<ul ng-repeat="(key, item) in item1" ng-include="'list.html'">
</ul>
</div>
</div>
</div>
<div ng-if="!isArray(item)">
</div>
</script>
</html>伙计们，这又是一件好事 link了解 Angular JS 递归。
关于javascript - Angular JS ng-repeat 具有复杂的 JSON 数据(数组、子数组、子对象)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34756013/
26
4
0
这是代码片段。 请说出这种用小内存存储大数据的算法是什么。 public static void main(String[] args) { long longValue = 21474836
所以我使用 imap 从 gmail 和 outlook 接收电子邮件。 Gmail 像这样编码 =?UTF-8?B?UmU6IM69zq3OvyDOtc68zrHOuc67IG5ldyBlbWFpb
很久以前就学会了 C 代码；想用 Scheme 尝试一些新的和不同的东西。我正在尝试制作一个接受两个参数并返回两者中较大者的过程，例如 (define (larger x y) (if (> x
Azure 恢复服务保管库有两个备份配置选项 - LRS 与 GRS 这是一个有关 Azure 恢复服务保管库的问题。 当其驻留区域发生故障时，如何处理启用异地冗余的恢复服务保管库？如果未为恢复服务启
说，我有以下实体： @Entity public class A { @Id @GeneratedValue private Long id; @Embedded private
我有下一个问题。 我有下一个标准: criteria.add(Restrictions.in("entity.otherEntity", getOtherEntitiesList())); 如果我的
如果这是任何类型的重复，我会提前申请，但我找不到任何可以解决我的具体问题的内容。 这是我的程序: import java.util.Random; public class CarnivalGame{
我目前正在使用golang创建一个聚合管道，在其中使用“$ or”运算符查询文档。 结果是一堆需要分组的未分组文档，这样我就可以进入下一阶段，找到两个数据集之间的交集。 然后将其用于在单独的集合中进行
是否可以在正则表达式中创建 OR 条件。 我正在尝试查找包含此类模式的文件名列表的匹配项 第一个案例 xxxxx-hello.file 或者案例二 xxxx-hello-unasigned.file
该程序只是在用户输入行数时创建菱形的形状，因此它有 6 个 for 循环； 3 个循环创建第一个三角形，3 个循环创建另一个三角形，通过这 2 个三角形和 6 个循环，我们得到了一个菱形，这是整个程序
我有一个像这样的查询字符串 www.google.com?Department=Education & Finance&Department=Health 我有这些 li 标签，它们的查询字符串是这样
我有一个带有静态构造函数的类，我用它来读取 app.config 值。如何使用不同的配置值对类进行单元测试。我正在考虑在不同的应用程序域中运行每个测试，这样我就可以为每个测试执行静态构造函数 - 但我
我正在寻找一个可以容纳多个键的容器，如果我为其中一个键值输入保留值(例如 0)，它会被视为“或”搜索。 map, int > myContainer; myContainer.insert(make_
我正在为 Web 应用程序创建数据库，并正在寻找一些建议来对可能具有多种类型的单个实体进行建模，每种类型具有不同的属性。 作为示例，假设我想为“数据源”对象创建一个关系模型。所有数据源都会有一些共享属
(1) =>CREATE TABLE T1(id BIGSERIAL PRIMARY KEY, name TEXT); CREATE TABLE (2) =>INSERT INTO T1 (name)
我不确定在使用别名时如何解决不明确的列引用。 假设有两个表，a 和 b，它们都有一个 name 列。如果我加入这两个表并为结果添加别名，我不知道如何为这两个表引用 name 列。我已经尝试了一些变体，
我的查询是: select * from table where id IN (1,5,4,3,2) 我想要的与这个顺序完全相同，不是从1...5，而是从1,5,4,3,2。我怎样才能做到这一点？ 最
我正在使用 C# 代码执行动态生成的 MySQL 查询。抛出异常: CREATE TABLE dump ("@employee_OID" VARCHAR(50)); "{"You have an er
我有日期 2016-03-30T23:59:59.000000+0000。我可以知道它的格式是什么吗？因为如果我使用 yyyy-MM-dd'T'HH:mm:ss.SSS，它会抛出异常 最佳答案 Sim
我有一个示例模式，它的 SQL Fiddle 如下: http://sqlfiddle.com/#!2/6816b/2 这个 fiddle 只是根据 where 子句中的条件查询示例数据库，如下所示:
我是一名优秀的程序员,十分优秀！