AngularJS: Strange binding when using ng-repeat

Question

I have an array similar to this [{"FirstValue":{"SubValue1":"ReallyLongValue"}, "SecondValue": "Michigan" }, {"FirstValue":{"SubValue2":"John"}, "SecondValue": "Vegas" }]

I need to be able to create a table like the following SubValue1: ReallyLongValue Michigan SubValue2: John Vegas

I have an ng-repeat going over the outer array which creates a directive. Inside of that directive I do another ng-repeat as follows

<td ng-repeat="(type, name) in employeecell.FirstValue">
  {{type}}
  <td>{{type}}</td>
  <td>{{name}}</td>
  <td>{{employeecell.SecondValue}}</td>
  <td>
    <button>test</button>
  </td>
</td>

This will bind the first type but once it reaches the next {{type}} it is just blank. I have tried using a div instead for the ng-repeat which does not work. I need to be able to get the actual value of the key "SubValue" as that is not potentially known.

Maybe I am approaching this incorrectly. I created a plnkr to give an idea of what I am going for.

http://plnkr.co/edit/mPtYGj?p=preview

Darryl · Accepted Answer · 2013-12-04 06:25:05Z

1

It looks like this is actually an HTML issue. Try this with the inner html table.

<td ng-repeat="(type, name) in employeecell.FirstValue">
{{type}}
  <table>
    <tr>
      <td>{{type}}</td>
      <td>{{name}}</td>
      <td>{{employeecell.SecondValue}}</td>
      <td><button>remove</button></td>
    </tr>
</table>
</td>

Is that what you were looking for?

answered Dec 4, 2013 at 6:25

Darryl

1,4511 gold badge12 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: Strange binding when using ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related