我正在学习角度教学。我正在使用ngRoute来结合2组视图/控制器。
customers.html和cutomersController和 orders.html和ordersController。当index.html加载时，它会根据需要显示customers.html。但是，当我点击“查看订单”时链接，它不显示订单详细信息。
代码的链接：http://plnkr.co/DW2rqiFIkxnhVPPisfLn
这是index.html的代码
<!DOCTYPE html>
<html ng-app="customersApp">
<head>
<title>Route 2</title>
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="customersController.js"></script>
<script src="ordersController.js"></script>
</body>
</html>
这是app.js的代码
var app = angular.module('customersApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'customers.html'
})
.when('/orders/:customerId', {
controller: 'OrdersController',
templateUrl: 'orders.html'
})
.otherwise( { redirectTo: '/' });
});
here is the code for customersController.js
app.controller('CustomersController', function ($scope){
$scope.sortBy= 'name';
$scope.reverse = false;
$scope.customers=[
{
id: 1,
joined: '2000-12-02',
name:'John',
city:'Sacramento',
orderTotal:7.554,
orders: [
{
id:1,
product: 'Shoes',
total: 7.554
}
]
},
{
id:2,
joined: '2012-12-07',
name:'Tom',
city:'Chandler',
orderTotal:19.99,
orders: [
{
id:2,
product: 'Baseball',
total: 9.995
},
{
id:3,
product: 'Bat',
total: 9.995
}
]
},
{
id: 3,
joined: '1997-05-02',
name:'Matt',
city:'Michigan',
orderTotal:19.993,
order: [
{
id:4,
product: 'Tiara',
total: 19.993
}
]
},
{
id: 4,
joined: '2001-10-08',
name:'Jane',
city:'New York',
orderTotal:112.954,
order: [
{
id:5,
product: 'Stereo',
total: 112.954
}
]
}
];
$scope.doSort = function(propName){
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
});
这是OrdersController.js的代码
(function(){
var OrdersController = function ($scope, $routeParams){
var customerId = $routeParams.customerId;
$scope.orders = null;
function init() {
// Search for the customers for the customer id
for(var i=0, len=$scope.customers.length; i<len;i++){
if ($scope.customers[i].id === parseInt(customerId)) {
$scope.orders = $scope.customers[i].orders;
break;
}
}
}
$scope.customers=[
{
id: 1,
joined: '2000-12-02',
name:'John',
city:'Sacramento',
orderTotal:7.554,
orders: [
{
id:1,
product: 'Shoes',
total: 7.554
}
]
},
{
id:2,
joined: '2012-12-07',
name:'Tom',
city:'Chandler',
orderTotal:19.99,
orders: [
{
id:2,
product: 'Baseball',
total: 9.995
},
{
id:3,
product: 'Bat',
total: 9.995
}
]
},
{
id: 3,
joined: '1997-05-02',
name:'Matt',
city:'Michigan',
orderTotal:19.993,
order: [
{
id:4,
product: 'Tiara',
total: 19.993
}
]
},
{
id: 4,
joined: '2001-10-08',
name:'Jane',
city:'New York',
orderTotal:112.954,
order: [
{
id:5,
product: 'Stereo',
total: 112.954
}
]
}
];
init();
};
OrdersController.$inject = ['$scope', '$routeParams'];
angular.module('customersApp')
.controller('OrdersController', OrdersController);
}());
这是customers.html的代码
<h2>Customers</h2>
Filter: <input type="text" ng-model="customersFilter.name"/>
<br /><br />
<table>
<tr>
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">Order Total</th>
<th ng-click="doSort('joined')">Joined</th>
</tr>
<tr data-ng-repeat="cust in customers | filter:customersFilter | orderBy:sortBy:reverse">
<td>{{cust.name}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date:'longDate'}}</td>
<td><a href="#/orders/{{ cust.id }}">View Orders</a></td>
</tr>
</table>
<br />
<span>Total customers: {{customers.length}}</span>
这是orders.html的代码
<h2>Orders</h2>
<table>
<tr>
<th>Product></th>
<th>Total</th>
</tr>
<tr ng-repeat="order in orders">
<td>{{order.product}}</td>
<td>{{order.total |currency}}</td>
</tr>
</table>
提前致谢！
答案 0 :(得分：0)
customers在其订单数组中只有一个订单，但对于Matt和Jane，order数组需要重命名为orders。
你只需要在ordersController.js中编辑这个硬编码的JSON，它应该可以工作。
{
id: 3,
joined: '1997-05-02',
name:'Matt',
city:'Michigan',
orderTotal:19.993,
order: [
{
id:4,
product: 'Tiara',
total: 19.993
}
]
},
{
id: 4,
joined: '2001-10-08',
name:'Jane',
city:'New York',
orderTotal:112.954,
order: [
{
id:5,
product: 'Stereo',
total: 112.954
}
]
}
];
在此期间你应该编辑这个循环
for(var i=0, len=$scope.customers.length; i<len;i++){
if ($scope.customers[i].id === parseInt(customerId)) {
$scope.orders = $scope.customers[i].orders;
break;
}
}
}
这是使用forEach方法的好地方。
$scope.customers.forEach(function(customer) {
if (customer.id === parseInt(customerId) {
$scope.orders = customer.orders;
})
});
它更现代，更容易阅读。