Angular: how to access object properties from external class (in ng-repeat)?

I am building a simple angular app to handle orders from customers.
In each order, I store the client id, not all the client data (denormalization is ok, but ... :-).
I don't know how to display the order list (using ng-repeat

) displaying the customer's name too ...

The my (firebase) data structure looks like this:

+ myapproot
  + customers
    + -JT5by1W6hylwsbVcfFg
      - name = "Alice"
      - ...
    + ...
  + orders
    + -JUUcRPpWnoyeXzklo9V
      - customerId = "-JT5by1W6hylwsbVcfFg"
      - date = "2014-08-16T16:23:47.047Z"
      - amount = "100"
      - ...
    + ...

      

My opinion is this:

  <table>
    <tr ng-repeat="(orderId, order) in orders | orderByPriority">
      <td title="Date of order">
        {{ order.date | date: 'dd MMMM yyyy HH:mm' }}
      </td>
      <td title="Customer name">
        {{ ??? }}
      </td>
      ...
    </tr>
  </table>

      

My controller looks like this:

app.controller('OrdersCtrl', function ($scope, Order, Customer) {

  $scope.order = {};
  $scope.orders = Order.all;

  ...
}

      


UPDATE : Reply from "Sunil D." is correct, accepted. This is my modified version, since I do not store the client ID inside the client data (I get the ID from the parent key) and I want to skip non-object elements:

$scope.customersById = {};
$scope.customers = Customer.all;
$scope.customers.$on('loaded', function() {
  angular.forEach($scope.customers, function(customer, id) {
    if (typeof customer === 'object') {
      $scope.customersById[id] = customer;
    }
  });
});

      

+3


source to share


1 answer


You can create a hash of customers and reference it in the view:



$scope.customersById = {};

angular.forEach($scope.customers, function(customer) {
   $scope.customersById[customer.id] = customer;
});

<td title="Customer name">
    {{customersById[order.customerId].name}}
</td>

      

+2


source







All Articles