Dynamic ng-repeat in AngularJS

Question

My angular controller is

$scope.dyna = [
    { "name": "parshuram", "age": 24 },
    { "name": "Tejash", "age": 26 },
    { "name": "Vinayak", "age": 25 }
];

My html

<table>
  <tbody>
    <tr ng-repeat="test in dyna">
     <td>{{test.name}}</td>
     <td>{{test.age}}</td>
    </tr>
  </tboody>
</table>

This works correctly, and outputs

Parshuram 24
Tejash    26

But if an another variable is added to my scope variable, I need to make changes in my html table:

  $scope.dyna = [
       { "name": "parshuram", "age": 24 ,"void": true},
       { "name": "Tejash", "age": 26,"void" : false }
  ];

  <table>
      <tbody>
        <tr ng-repeat= "test in dyna">
         <td>{{test.name}}</td>
         <td>{{test.age}}</td>

         <!-- I don't want to have to add this, the columns should be added dynamically -->
        <td>{{test.void}}</td>
        </tr>
      </tboody>
    </table>

In that case, can the columns be generated dynamically, for example by getting all my object variables from the scope?

check key,value method in ng-repeat

Sa E Chowdary
– Sa E Chowdary

2016-11-25 07:59:54 +00:00
Commented Nov 25, 2016 at 7:59 — Sa E Chowdary
– Sa E Chowdary, Commented Nov 25, 2016 at 7:59

Robin-Hoodie · Accepted Answer · 2016-11-25 08:14:30Z

4

ng-repeat can loop over object key/values as well:

<table>
  <tbody>
    <tr ng-repeat= "test in dyna">
      <td ng-repeat="(key, value) in test">
        {{value}}
      </td>
     </tr>
  </tbody>
</table>

However as noted in the docs linked above, there are a few limitations compared to an ng-repeat that works on arrays:

The JavaScript specification does not define the order of keys returned for an object, so Angular relies on the order returned by the browser when running for key in myObj. Browsers generally follow the strategy of providing keys in the order in which they were defined, although there are exceptions when keys are deleted and reinstated. See the MDN page on delete for more info.

ngRepeat will silently ignore object keys starting with $, because it's a prefix used by Angular for public ($) and private ($$) properties.

The built-in filters orderBy and filter do not work with objects, and will throw an error if used with one.

answered Nov 25, 2016 at 8:14

Robin-Hoodie

4,9944 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Parshuram Kalvikatte Over a year ago

It works thanks i am not worried about order,does this method as any other limitation

Robin-Hoodie Over a year ago

@Parshuram Not that I know of no

Zyga · Accepted Answer · 2016-11-25 08:03:04Z

2

You should be able to do that with (key,value) iteration.

Would be nice to have fiddle to verify but would be something like:

<tr ng-repeat= "test in dyna">
    <td ng-repeat="(key,value) in test">{{value}}</td>
</tr>

answered Nov 25, 2016 at 8:03

Zyga

2,4373 gold badges23 silver badges32 bronze badges

1 Comment

Boaris Over a year ago

Reversed order.

Boaris · Accepted Answer · 2016-11-25 08:47:14Z

0

If at 'runtime', I don't know. Otherwise:

<div ng-controller="MyCtrl">
  <table>
  <tbody>
    <tr ng-repeat= "test in dyna">
      <td ng-repeat="key in objectKeys(test)">{{test[key]}}</td>
    </tr>
  </tbody>
  </table>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.dyna = [
        { "name": "parshuram", "age": 24 },
        { "name": "Tejash", "age": 26 },
        { "name": "Vinayak", "age": 25 }
    ];

    $scope.objectKeys = function (object) {
      var keys = Object.keys(object);
      keys.splice(keys.indexOf('$$hashKey', 1))
      return keys;
    }

}

fiddle

answered Nov 25, 2016 at 8:47

Boaris

5,2369 gold badges43 silver badges77 bronze badges

Comments

shahab · Accepted Answer · 2016-11-26 11:25:26Z

0

HTML

<html>
<script src="library/angular.min.js"></script>
<script src="practice.js"></script>
<head>
</head>
<body ng-app="app">
<div ng-controller="test1" ng-bind-html="result">
</div>
</body>
</html>

Angularjs

angular.module('app',[]).controller('test1',['$scope','$compile','$sce',function($scope,$compile,$sce){
    $scope.dyna = [
    { "name": "parshuram", "age": 24 },
    { "name": "Tejash", "age": 26 },
    { "name": "Vinayak", "age": 25 }
];
$scope.result="<table><tbody>";
for(var i=0;i<$scope.dyna.length;i++){
        $scope.result+="<tr>";
        for(var key in $scope.dyna[i])
            if($scope.dyna[i].hasOwnProperty(key))
                $scope.result+='<td>'+$scope.dyna[i][key]+'</td>';
        $scope.result+="</tr>";
}
    $scope.result+="</tbody></table>";
    $scope.result=$sce.trustAsHtml($scope.result);
}]);

This is another way, creating html in controller.

answered Nov 26, 2016 at 11:25

shahab

56 bronze badges

2 Comments

Parshuram Kalvikatte Over a year ago

No i dont want to do this i am not playing in my controller, my html string is coming from server and i am just binding here so this will not work for me

shahab Over a year ago

this is a way for creating html dynamically, even for creating html in server side. but ng-repeat is simple way and better.

user3112115 · Accepted Answer · 2016-11-25 07:58:28Z

-2

just make it again put another ng-repeat in your loop for the test variable:

$scope.dyna = [{ "name": "parshuram", "age": 24 ,"void": true}, { "name": "Tejash", "age": 26,"void" : false }];

  <table>
      <tbody>
        <tr ng-repeat= "test in dyna">

           <td ng-repeat="t in test">{{test[t]}</td> // just like this
        </tr>
      </tboody>
    </table>

answered Nov 25, 2016 at 7:58

user3112115

7253 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Dynamic ng-repeat in AngularJS

5 Answers 5

2 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related