Angular.js ng-repeat 数组显示为 json

Posted 2023-05-09

【中文标题】Angular.js ng-repeat 数组显示为 json

【英文标题】：Angular.js ng-repeat array shows as json

【发布时间】：2017-11-01 08:11:00

【问题描述】：

我有一个问题，我试图使用 ng-repeat 在 Angularjs 中显示一个数组，但它显示了整个 json 数组，而不仅仅是里面的文本。

这是我的数组

$scope.problems = [

    
        problem: "problem1",
        works: [
            "a0",
            "a9"
        ]
    
]

这就是我想要展示它的地方

<li ng-repeat="works in problems | filter: searchCard">works</li>

现在works 标签在实时文档中显示了这一点：

"problem":"probleem1","works":["a0","a9"]

根据我看到的大多数教程和内容，它应该显示 a0 和 a9 而不是整个 json 行。

我的第二个问题可能完全不同，我如何才能正确显示文本，同时隐藏所有文本，直到有人使用输入搜索“作品”输入字段。

【问题讨论】：

对于第二个问题，您应该打开一个新线程，只包含解决第二个问题所需的代码

@DeblatonJean-Philippe 我会在未来！

【参考方案1】：

当您在 ng-repeat 上有 objects Array 时，您必须选择该对象参数；在这个示例中，我们的对象参数是 "problem" 和 "works"

同样在我们的对象中我们有 "string array" 并且字符串数组没有参数，因为我们在这个示例中直接使用它 work 是字符串数组的对象.

<li ng-repeat="item in problems | filter: problem: searchCard">
  item.problem
  <ul>
    <li ng-repeat="work in item.works">work</li>
  </ul>
</li>

【讨论】：

嘿！谢谢伙计，它按预期工作，如果可以的话，可以快速跟进问题，我可以隐藏列表直到有人使用过滤器：searchCard 我希望隐藏数组，直到用户搜索例如 A1 并且它会在文本中显示 A1 ?我在想它可能需要一个 ng-if 但我不知道怎么做。

你必须指定你正在搜索的参数

我不能再编辑我的评论了，但是这个帖子下面的用户已经回答了我的搜索问题，谢谢你们！

你必须指定你正在搜索的参数，例如你想搜索problem，使用这个filter: problem: searchCard

【参考方案2】：

你可以像@Maher 提到的那样使用嵌套的 ng-repeats。另外，为了在输入searchCard 之前隐藏数据，您可以在嵌套的ui 中使用ng-if 指令。

<li ng-repeat="item in problems | filter: searchCard">
  item.problem
  <ul ng-if="searchCard">
    <li ng-repeat="work in item.works">work</li>
  </ul>
</li>

【讨论】：

我不明白你为什么添加ng-if

据我了解，OP 说how can i display the text correctly but also hide all of them until a person has used the input to search the "works" input field