用angular循环遍历javaScript对象的数组 [英] Looping through a javaScript object's array with angular

问题描述

所以我绝对不熟悉编写任何类型的代码，我正在尝试使用AngularJS建立一个简单的网站，并且在通过指令模板遍历控制器的对象数组时遇到问题.我的目标是将每个数组字符串输出到模板中单独的列表项元素中，例如在控制器中，我有

  $ scope.items = [{列表:["1"，"2"，"3"]，名称:随便"}，{列表:["4"，"5"，"6"，"7"，"8"]，名称:"whatever2"}] 

在指令模板中，我写了这样的东西

 < h1> {{directive.name}}</h1>< ul id ="items"</ul>< script>for(var i = 0; i< directive.list [].length; i ++){document.getElementById("items").innerHTML =< li> {{" +指令.list [i] +}}</li>";};</script> 

使用模板可以在 index.html 中正确检索名称对象，但是list对象不会输出该数组，给出了我的最佳镜头，尝试进行故障排除以使其正确，但我似乎无法弄清楚，需要帮助:(希望我已经足够清楚了，这是我第一次尝试创建任何东西，并且仍然试图熟悉所有术语.

解决方案

以下是镜头:

 < div ng-repeat ="i in items">< h1> {{i.name}}</h1>< ul>< li ng-repeat ="i.list中的项目"> {{i}}</li></ul></div> 

说明:

基本上，您要遍历数组< div ng-repeat .. 中的所有项目，然后为每个要创建< ul>

的项目进行遍历代码>

So I'm absolutely new to writing any type of code, I'm trying to build a simple website using AngularJS and I'm having a problem with looping through a controller's object array through a directive template. My goal is to output each array string into a separate list item element in the template, for example in the controller I have

    $scope.items = [
    {
     list: ["1", "2", "3"],
     name: "whatever"
    },
    {
     list: ["4", "5", "6", "7", "8"],
     name: "whatever2"
    }]

in the directive template I have written something like this

    <h1>{{ directive.name }}</h1>
    <ul id= "items"></ul>
    <script>
            for (var i = 0; i < directive.list[].length; i++) {
                  document.getElementById("items").innerHTML = 
                   "<li>{{" + directive.list[i] + "}}</li>";
            };
    </script>

the name object retrieves correctly in index.html using the template but list object will not output the array, gave it my best shot, tried troubleshooting to get it right and I can't seem to figure it out, need help :( hope I'm being clear enough, this is my first attempt at creating anything and still trying to get familiar with all the jargon.

解决方案

Here is a shot:

<div ng-repeat="i in items">
   <h1>{{ i.name }}</h1>
   <ul>
     <li ng-repeat="item in i.list">{{i}} </li>
   </ul>
</div>

And the description:

Basically you want to loop through all the items in your array <div ng-repeat.. then for each of those items you want to create the <ul>

这篇关于用angular循环遍历javaScript对象的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！