Javascript AngularJS-我的一些作用域变量未显示

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

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

4个变量中只有2个显示。当我将一个字符串或整数放入{{}角度符号中以代替order.total | currency时，将显示该字符串或整数。但是，当我尝试对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>

---

你能用console.log来记录$scope.orders变量并显示和使用内容吗？当然，我在html td标记中添加了id“total:

{{order.total | currency}}

，并用console log来获得以下内容：

ChildScope{$$childTail:null，$$childHead:null，$$nextSibling:ChildScope，$$watchers:Array[5]，$$listeners:Object…}$$ChildScope:null$$childHead:null$$childTail:null$$listenerCount:Object$$listeners:Object$$nextSibling:ChildScope$$previsibling:null$$transcluded:true$$watchers:Array[5]$$watchersCount:5$偶数：true$first:true$id:13$index:0$last:false$middle:false$odd:false$parent:Scopeorder:Resource\uuuuu proto\uuuu:Scope

太多了。我只是想看看$scope.orders.我的错误。刚开始做开发人员。将

console.log（$scope.orders）

放在我的控制器上，然后重新加载页面。这是我的结果：

[$promise:promise，$resolved:false]0:Resource$$hashKey:“object:12”id:28 product:object-product\u-id:“3”user\u-id:null\u-proto\u\u:object

总共有七个

资源

，每个都构成了我的一个订单。6:Resource之后是

$promise:promise$resolved:true length:7_uuuuproto:uuuuu:Array[0]

您有没有可能为此创建一个JSFIDLE？您可以控制台.log$scope.orders变量并显示使用内容吗？当然，我在html td标记中添加了id“total:

{order.total | currency}，并使用控制台日志获取以下内容：
ChildScope{$$childTail:null，$$childHead:null，$$nextSibling:ChildScope，$$watchers:Array[5]，$$listeners:Object…}$$ChildScope:null$$childHead:null$$childTail:null$$listenerCount:Object$$listeners:Object$$nextSibling:ChildScope$$prevSibling:null$$transcluded:true$$watchers:Array[5]$$watchersCount:5$偶数：true$first:true$id:13$index:0$last:false$middle:false$odd:false$$false$$parent:Scopeorder:Resource\uuuuuuuuuuuuuuuuuuuuuuu。我只是想看看$scope.orders.我的错误。刚开始做开发人员。将
console.log（$scope.orders）
放在我的控制器上，然后重新加载页面。这是我的结果：
[$promise:promise，$resolved:false]0:Resource$$hashKey:“object:12”id:28 product:object-product\u-id:“3”user\u-id:null\u-proto\u\u:object
总共有七个
资源
，每个都构成了我的一个订单。6:Resource之后是
$promise:promise$resolved:true length:7\uuuu proto:\uuuuu:Array[0]
您有没有可能为此创建一个JSFIDLE？
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);
};
}]);