CODEWITHSUNDEEP
angularjs
batman
batman

Reputation: 4928

ng-repeat is not working for the json value

I have a code like this:

<tr ng-repeat="tagJson in tagList">
    <div ng-repeat="(key, value) in tagJson">
        <td width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
            {{key}}
        </td>
        <td width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
            {{value}}
        </td>
    </div>
</tr>

where tagList is :

[{a:1},{a:1}]

But the key and value are empty! Not sure why thats the case. If i try to print tagJson in the html like:

{{tagJson}}

it does print:

{a:1}
{a:1}

but key and value doesnt work!

Where I'm making the mistakes?

See here:

http://jsfiddle.net/Vwsej/126/

Upvotes: 1

Views: 74

Answers (2)

akonsu
akonsu

Reputation: 29576

You do not see anything because this is invalid markup for the table. You have div elements inside.

maybe this?

<div ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="tagJson in tagList">
      <td ng-repeat="(key, value) in tagJson">
        {{key}}={{value}}
      </td>
    </tr>
  </table>
</div>

but to emit the markup that you wanted, I think you need a custom directive for that.

Upvotes: 2

Yoshi
Yoshi

Reputation: 54659

The actual reason why you don't see anything is, as akonsu posted, because you're producing invalid html.

To keep the values in seperate table cells, you can use ng-repeat-start/end, e.g.:

var MainCtrl = function () {
  this.tagList = [{a:1}, {b:2}];
};

angular
  .module('app', [])
  .controller('Main', MainCtrl)
;
table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="Main as main">
  <table>
    <tr ng-repeat="tagJson in main.tagList">
      <td ng-repeat-start="(key, value) in tagJson" width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
        {{key}}
      </td>
      <td ng-repeat-end width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
        {{value}}
      </td>
    </tr>
  </table>
</div>

Upvotes: 3

Related Questions