CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Parshuram Kalvikatte
Parshuram Kalvikatte

Reputation: 1636

Dynamic ng-repeat in AngularJS

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?

Upvotes: 2

Views: 2786

Answers (5)

shahab
shahab

Reputation: 5

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.

Upvotes: 0

Boaris
Boaris

Reputation: 5216

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

Upvotes: 0

Robin-Hoodie
Robin-Hoodie

Reputation: 4974

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.

Upvotes: 4

Zyga
Zyga

Reputation: 2417

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>

Upvotes: 2

user3112115
user3112115

Reputation: 715

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>

Upvotes: -2

Related Questions