Question

我有一个嵌套的JSON＆＃34;对象＆＃34;我想在我的网页上显示znanja。它将包含我想在列表中创建的许多值。基本上我是在建立一个投资组合，并希望列出我的技能。到目前为止，我已设法显示标题和整个对象，或通过调用特定的对象（例如{{ znanje.ena }}），但我无法弄清楚如何在没有属性的情况下显示它们名称。如果我只调用{{ znanje }}，我会像JSON一样列出它们。是否有一个angularJS指令我可以这样做吗？我是棱角分明的新人，所以对任何帮助表示赞赏。

我的观点：

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="znanje in skill.znanja">{{ znanje }}</p>
</div>

我的数据：

  $scope.skills = [
  {
      title: "Code Knowledge",
      znanja : [{
        ena : "Javascript",
        dva : "HTML",
        tri : "CSS",
        stiri : "SASS"
      }]
  },
  {
      title: "Base Code Knowledge",
      znanja : [{
        ena : "Java",
        dva : "PhP"
      }]
  },
  {
      title: "Data",
      znanja : [{
        ena : "MongoDB",
        dva : "MySQL"
      }]
  }
  ];

PS：我已经将znanja属性命名为ena，dva，tri，stiri而不是1,2,3,4，以便能够在html中调用它们。

Answer 1

可以让ngRepeat迭代一个属性使用以下语法对象：

var myDropzone = new Dropzone(".myDZ", {
    url: $('#form').attr('action'), 
    previewTemplate: previewTemplate,
    uploadMultiple: true, 
    previewsContainer: "#previews", 
    clickable: "#fileinput-btn", 
    autoProcessQueue: false,
    init: function() {
        var dz = this;
        this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
            e.preventDefault();
            dz.processQueue();
        });
    },
    // Try this success.
    success: function (data, response) {
        console.log(response);
    }
});

https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

您想要应用循环的对象只是znanja数组中的第一个元素，因此您应该指定skill.znanja[0]而不是skill.znanja。

通过执行此操作，您ng-repeat将遍历对象的每个属性，而{{znanje}}将打印znanja[0]的每个属性的值

<强>标记

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="znanje in skill.znanja[0]">{{ znanje }}</p>
</div>

Answer 3

为了显示你需要的属性，DOM元素和DOM元素需要一个特定的值来呈现，所以你必须手动至少一次迭代专门调用属性。如果你有任何重复，你可以像使用 ng-repeat 一样包含它。

也就是说，如果你想在html页面上单独显示每个属性，之后想要访问它，但是如果你只想显示为 json 对象，就像传递 json

Answer 4

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="(key,value) in skill.znanja[0]">{{key}} <b>:</b> {{value}}</p>
</div>

Answer 5

（测试）结合了znanja-object 0和值：

    <div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>

    <p ng-repeat="(key, value) in skill.znanja[0] ">{{ value }}</p>
    </div>

Answer 6

解决此问题的最简单，最好的方法是更改数据结构。只需删除您迭代的列表周围的包装数组，将它们转换为对象图：

$scope.skills = [
{
  title: "Code Knowledge",
  znanja : {
    ena : "Javascript",
    dva : "HTML",
    tri : "CSS",
    stiri : "SASS"
  }
},
{
  title: "Base Code Knowledge",
  znanja : {
    ena : "Java",
    dva : "PhP"
  }
},
{
  title: "Data",
  znanja : {
    ena : "MongoDB",
    dva : "MySQL"
  }
}
];

如果您不打算以任何方式使用该数组（所有示例只包含一个元素），那么就没有理由将它放在那里。

没有必要以这种方式更改原始ng-repeat中的任何内容。

angularJS - 迭代JSON对象

6 个答案: