Printing array of objects in table (Angular JS)

By : Freya
Source: Stackoverflow.com
Question!

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.

By : Freya


Answers

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'
  }];

}]);


Another job for plain old for loop:

for url in testurl1, testurl2, testurl3
    req = Request(url)
    try:
        response = urlopen(req)
    except HttpError as err:
        if err.code == 404:
            continue
        raise
    else:
        # do what you want with successful response here (or outside the loop)
        break
else:
    # They ALL errored out with HTTPError code 404.  Handle this?
    raise err
By : wim


that would change the height of your box and align it center

    .trending-button1{  
    border-radius: 25px;
    border: 3px solid #fff;
    padding: 20px;
    width: 200px;
    max-height: 20px;
    margin:0 auto;
    }
By : kdskii


This video can help you solving your question :)
By: admin