CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
jose
jose

Reputation: 1054

How to bind the array data in ng-repeat using AngularJS

I am using angularjs, I have following set of data that I need to bind to a table using ng-repeat. I tried thus but I am not able to reach my output my data in sub array so I am not able to bind this in repeat, anyone help how to do this .

data

 $scope.SubData=[{
    Name: '1',
    Subject: [{
        tamil: 12,
        english: 21,
        social: 45
    }]
},
{
    Name: '2',
    Subject: [{
        tamil: 10,
        english: 20,
        social: 30,
        geo: 40
    }]
}]

Expected output should look like this

enter image description here

NOTE:Subject Names are Dynamically

Upvotes: 0

Views: 1790

Answers (4)

Sangwin Gawande
Sangwin Gawande

Reputation: 8166

Try This, It's exactly what you need : 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th,
    td {
        padding: 5px;
        text-align: left;
    }
    table#t01 tr:nth-child(even) {
        background-color: #eee;
    }
    table#t01 tr:nth-child(odd) {
        background-color: #fff;
    }
    table#t01 th {
        background-color: black;
        color: white;
    }
</style>

<body ng-app="myApp" ng-controller="myCtrl">

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Subject</th>
        </tr>
        <tr ng-repeat="x in SubData">
            <td>{{ x.Name }}</td>
            <td><label ng-repeat="(key, value) in x.Subject"><label ng-repeat="(k,z) in value">{{k}} - {{z}}<label ng-show="!$last"> ,</label> <br></label></label>
            </td>
        </tr>
    </table>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
            $scope.SubData = [{
                    Name: '1',
                    Subject: [{
                        tamil: 12,
                        english: 21,
                        social: 45
                    }]
                },
                {
                    Name: '2',
                    Subject: [{
                        tamil: 10,
                        english: 20,
                        social: 30,
                        geo: 40
                    }]
                }
            ]
        });
    </script>
</body>
</html>

Output :

Output

Upvotes: 1

Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20147

function ClickToEditCtrl($scope) {
  $scope.SubData=[{Name:'1',Subject:[{tamil:12,english:21,social:45}]},
              {Name:'2',Subject:[{tamil:10,english:20,social:30,geo:40}]}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <table style="border : 1px solid black">
    <thead>
    <td>Name</td>
    <td>Subject</td>
    </thead>
    <tbody>
      <tr ng-repeat="stu in SubData">
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
    </tbody>   
</table>
  </div>
</div>

You can do double iteration . i mean 2 ng-repeat to achive it..

one for overall list,

<table ng-repeat="stu in SubData">
   <tr>
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
</table>

Upvotes: 1

Newbie
Newbie

Reputation: 19

function ClickToEditCtrl($scope) {
  $scope.SubData=[{Name:'1',Subject:[{tamil:12,english:21,social:45}]},
              {Name:'2',Subject:[{tamil:10,english:20,social:30,geo:40}]}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <table style="border : 1px solid black">
    <thead>
    <td style="border: 1px solid black">Name</td>
    <td style="border: 1px solid black">Subject</td>
    </thead>
    <tbody>
      <tr  ng-repeat="stu in SubData">
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
    </tbody>   
</table>
  </div>
</div>

Upvotes: 1

Sai
Sai

Reputation: 2658

You can do like this:

<table ng-repeat="stu in SubData">
  <tr>
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(key, val) in stu.Subject[0]">
        {{key}}:{{val}}
     </td>
  </tr>
</table>

Here is the plunker

Hope this helps.

Upvotes: 2

Related Questions