Monday 6 June 2016

Iterate the Array Model and render the values in application using Angular JS

In this post we are going to see how to iterate the array model and render the values in application using angular js.

Basic Steps to do is,
1.Add the angular js Library
2. Bootstrap the app
3. Initialize the Array Model

Generally Array is a collection of values, so if you want to get the values then we have to iterate, Here we are going to see two types of array 1. string array, 2. object array

For any array if you want to iterate then pass that to the ng-repeat, like ng-repeat="item in items", Here items is a collection and item is a single item of each iteration.

Now we see a sample.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript" src="Scripts/angular.js"></script>
    <style>
        .liStyle
        {
            list-stylenone;
            border-radius5px;border1px solid cornflowerblue;
            padding5px;margin:5px;width:250px;
            align-contentcenter;
            text-aligncenter";
        }
    </style>
</head>
<body ng-app ng-init="
        Topics = ['Services','Factory','Provider','Config','Run','Scope','Controller'];
        Styles={BackColor:'#269abc',ForeColor:'#ffffff'};
        Languages=[{ID:1,Value:'C#'},{ID:2,Value:'Java'},{ID:3,Value:'C++'}]">
  
   <div>
     
     <strong style="color:darkblue;margin-left100px">Angular JS Topics</strong>
      <br/>
      <br/>
    
       <ul>
          
            <li class="liStyle" style="color:{{Styles.ForeColor}};
                    background-color: {{Styles.BackColor}};"
              ng-repeat="mod in Topics">{{mod}}</li>

          
          <li class="liStyle">Languages</li>
          <li class="liStyle"
                  ng-repeat="lang in Languages">
              <div>
                  <span>{{lang.ID}}</span> place goes to the <span>{{lang.Value}}</span>
              </div>
          </li>


      </ul>

  </div>
</body>

</html>


Output:
*************
1. String Array.


2. Object Array.



From this post you can learn how to iterate the Array like model and render the values in application using angular js .

No comments:

Post a Comment