AngularJS-我的一些范围变量没有显示

Question

我是一名新开发人员，使用Angular JS为我在Ruby on Rails中创建的应用创建订单页面。我想要显示一些Angular变量：

• order.id （显示）
• order.user.email （不显示）
• order.total （不显示）
• order.product.name （显示）

显示4个变量中只有2个。当我将一个字符串或整数放入{{}} Angular表示法而不是 order.total |时货币，显示字符串或整数。但是，当我尝试使用 order.product.name 时，没有任何反应。

以下是我的相关代码：

View.html：

<div ng-controller="OrdersCtrl">
<h1>Orders</h1>
<div class="container">
    <form class="form-inline" ng-submit="addOrder()">
        <strong>Add Order: </strong>
        <select ng-model="newOrder.product_id" class="form-control">
            <option value="" disabled selected>Select a Product</option>
            <option ng-repeat="product in products" value="{{product.id}}">    {{product.name}}</option>
        </select>
        <input type="number" step="1" class="form-control" placeholder="Total" ng-model="newOrder.total">
        <input type="number" class="form-control" ng-model="newOrder.product_id">
        <input type="submit" value="+" class="btn btn-success">
    </form>

  <table class="table table-hover">
    <thead>
        <td>Order ID</td>
        <td>Total</td>
        <td>Product</td>
        <td></td>
    </thead>
    <tr ng-repeat="order in orders | orderBy:'-id':reverse">
        <td>
            {{order.id}}<small ng-show="order.user_id"><br>-{{order.user.email}}</small>
        </td>
        <td>
            <strong>{{order.total | currency}}</strong>
        </td>
        <td>
            {{order.product.name}}
        </td>
        <td>
            <button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
        </td>
    </tr>
  </table>
</div>

Controller（app.js）

var app = angular.module('shop', ['ngResource']);
//Workaround to get Angular running
$(document).on('ready page:load', function() {
angular.bootstrap(document.body, ['shop'])
});
//factory for models
app.factory('models', ['$resource', function($resource){
var orders_model = $resource("/orders/:id.json", {id: "@id"});
var products_model = $resource("/products/:id.json", {id: "@id"});
var x = {
    orders: orders_model,
    products: products_model
};
return x;
}]);
//connect app to OrdersCtrl controller
app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){
// Here will be all code belonging to this controller
$scope.orders = models.orders.query();
$scope.products = models.products.query();
//add new orders
$scope.addOrder = function(){
    //only orders with product id or zero total gets added
    if(!$scope.newOrder.product_id || $scope.newOrder.total === ''){      return; }
    //Order can be submitted if product_id and total are filled out
    order = models.orders.save($scope.newOrder, function(){ //POST
        recent_order = models.orders.get({id: order.id});
        $scope.orders.push(recent_order);
        $scope.newOrder = '';
    });
}
//delete orders
$scope.deleteOrder = function(order){
    models.orders.delete(order);
    $scope.orders.splice($scope.orders.indexOf(order), 1);
};
}]);