How to use foreach with AngularJS on HTML

20,028

Solution 1

Just loop thru it:

 <p ng-repeat="(key, value) in controller.greeting.custinfo">{{key}}: {{value}}</p>

Solution 2

To display a list using AngularJS, you need an array that you will iterate.

Let's say you have list of customers

$scope.customers = [{id:1, name:'customer1'}, .....];

You will do so this

 <ul>
<li ng-repeat="custInfo in customers">{{custInfo.name}}       </li>
</ul>
Share:
20,028
Mike.Chun
Author by

Mike.Chun

Updated on July 09, 2022

Comments

  • Mike.Chun
    Mike.Chun almost 2 years

    How do I use a foreach statment in angular js? My current data is printing out as a json format. I want to make it printed out on new lines.

    Html

    <p>{{controller.greeting.custinfo}}</p>
    
     //attempt
    <p ng-repeat= >{{controller.greeting.custinfo}}</p>
    

    Output on UI

    {"id":null,"biling_address":"null","billing_state":"FL","ip_Addresses":["123:111:2101","","NULL"],name":"jimmmy"}
    

    java output

    System.out.println(custinfo);
    demo.model.cert@ba1983a
    

    How can I use a foreach statement to display the data in new lines? Rather than a json format.

    I know how to do this with thymeleaf,example below

    <table th:each="custinfo : ${custinfo}">
    
      <tr>
            <td ng-show="id" class="padded">id:</td>
            <td ng-show="id" th:text="${custinfo.id}" class="padded"></td>
      </tr>
      //continue down