Question

我是角色的新手，我正面临这个问题我正在从角度JS服务进行API调用，我得到结果为长度为165的JSON数组我想在我的网站上显示这个结果，但我想显示这个结果分为10列，我可以做的一件事是将数组除以10并为每列创建10个数组，我必须为每列运行ng-repeat。还有更合适的方法。

实施例 -

输入json： - [{ “author_id”：“16483”， “author_name”：“A。A. Milne” }，{ “author_id”：“24988”， “author_name”：“A。B. Yehoshua” }，{ “author_id”：“1339”， “author_name”：“A。Balasubramaniam” }，{ “author_id”：“9138”， “author_name”：“A。Bartlett Giamatti” }，{ “author_id”：“2125”， “author_name”：“A。C. Benson” } }]

如果我使用ng-repeat

AUTHOR_NAME

一个。 A.米尔恩

一个。 B. Yehoshua

一个。 Bartlett Giamatti

一个。 C. Benson

一个。 Balasubramaniam

我想要实现的目标

一个。 A. Milne A. Bartlett Giamatti

一个。 B. Yehoshua A. C. Benson

一个。 Bartlett Giamatti A. Balasubramaniam

Answer 1

您应该将其呈现为<ul>并使用CSS将其设为列：

<ul>
    <li ng-repeat="author in authors track by $index">{{author.author_name}}</li>
<ul>

ul {
  font-size: 10px;
  width: 1000px;
  list-style: none;
}

li {
  display: inline-block;
  width: 100px;
  overflow: hidden;
}

此处a demo

Answer 2

不是在控制器中创建10个数组，而是可以使用角度limitTo过滤器

使用示例：

 problem occurred configuring project ':app'.
> Exception thrown while executing model rule: model.android
   > No such property: resConfigs for class: com.android.build.gradle.managed.ProductFlavor

* Exception is:
org.gradle.api.ProjectConfigurationException: A problem occurred configuring project ':app'.
    at org.gradle.execution.TaskNameResolver.selfClosedTasksNode(TaskNameResolver.java:116)
    at org.gradle.execution.TaskNameResolver.hasTask(TaskNameResolver.java:128)
    at org.gradle.execution.TaskNameResolver.access$100(TaskNameResolver.java:38)
    at org.gradle.execution.TaskNameResolver$MultiProjectTaskSelectionResult.collect(TaskNameResolver.java:195)
    at org.gradle.execution.TaskNameResolver$MultiProjectTaskSelectionResult.collect(TaskNameResolver.java:203)
    at org.gradle.execution.TaskNameResolver$MultiProjectTaskSelectionResult.collectTasks(TaskNameResolver.java:191)
    at org.gradle.execution.TaskNameResolver.selectWithName(TaskNameResolver.java:61)
    at org.gradle.execution.TaskSelector.getSelection(TaskSelector.java:87)
    at org.gradle.execution.TaskSelector.getSelection(TaskSelector.java:75)
    at org.gradle.execution.commandline.CommandLineTaskParser.parseTasks(CommandLineTaskParser.java:42)
    at org.gradle.execution.TaskNameResolvingBuildConfigurationAction.configure(TaskNameResolvingBuildConfigurationAction.java:44)
    at org.gradle.execution.DefaultBuildConfigurationActionExecuter.configure(DefaultBuildConfigurationActionExecuter.java:51)
    at org.gradle.execution.DefaultBuildConfigurationActionExecuter.access$000(DefaultBuildConfigurationActionExecuter.java:25)
    at org.gradle.execution.DefaultBuildConfigurationActionExecuter$1.proceed(DefaultBuildConfigurationActionExecuter.java:57)
    at org.gradle.execution.ExcludedTaskFilteringBuildConfigurationAction.configure(ExcludedTaskFilteringBuildConfigurationAction.java:47)
    at org.gradle.execution.DefaultBuildConfigurationActionExecuter.configure(DefaultBuildConfigurationActionExecuter.java:51)

上面的行将呈现10行，并将从0索引开始。

所以下一栏也可能就是这样：

<div ng-repeat="item in items | limitTo:10:0>

现在例如，如果您想要10行，每行10列：

<div ng-repeat="item in items | limitTo:10:10>

在不同的列Angular JS中显示JSON结果

2 个答案: