Looping through a javaScript object's array with angular

Question

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.

Answer 1

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>

Answer 2

It's simple -- replace your <script> with this:

<ul> <li ng-repeat="item in items">{{ item.name }} <ul id="items"> <li ng-repeat="list_item in item.list">{{ list_item }}</li> </ul> </li> </ul>