current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have an array of objects like this one:

$scope.sales = [
{id: 15, location:'neverland'},
{id: 16, location:'farawayland'},
{id: 17, location:'highland'}
];

This array I am trying to display in a table, it should look like this:

id | location

15 | neverland

16 | farawayland

17 | highland

My html :

<input type="text" ng-model="sales[0].id">
<table class="table table-hover">
    <tr ng-repeat="x in sales">
        <td>{{x.id}}</td>
        <td>{{x.location}}</td>
    </tr>


</table>

The input field with value 15 gets printed. It works if I also ask the 2nd or 3rd value. But the table consists of 3 empty rows.

If I add an index (even <td>{{x[0].id}}</td>), I get a server error.

share|improve this question
    
Right-click and choose "inspect element." That will make it clear if the content is actually there, but just not displayed. This could happen if your CSS is not appropriate. – Amy Blankenship Sep 28 at 20:33
    
@Amyblankenship Already did that. There is no content, just empty <td> – Freya Sep 28 at 20:34
    
What you are showing should work fine. Create a demo that reproduces this...very simple to set one up in plunker – charlietfl Sep 28 at 20:41
up vote 0 down vote

It works fine for me, check it here.

Maybe you are missing something else.

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

<body ng-controller="Controller">
  <input type="text" ng-model="sales[0].id">
  <table class="table table-hover">
    <tr ng-repeat="x in sales">
      <td>{{x.id}}</td>
      <td>{{x.location}}</td>
    </tr>
  </table>
</body>

</html>

script.js

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

app.controller("Controller", ['$scope', function($scope) {

  $scope.sales = [{
    id: 15,
    location: 'neverland'
  }, {
    id: 16,
    location: 'farawayland'
  }, {
    id: 17,
    location: 'highland'
  }];

}]);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.