我是AngularJS的新手,我正在尝试使用ui-route。 我制作了一个客户表,当您点击客户购物车时,您可以看到她/他购物的详细信息。 CustomerId应该作为参数传递给州。
<a ui-sref="order{{ cust.id }}" class="color-violet"><i class="fa fa-shopping-cart"></i></a>
但我收到错误
无法解决州'home'的'order1'
以下是代码:customers.html
<!-- views/customers.html -->
<div class="container">
<div class="row" ng-cloack>
<h2>Customers</h2>
<br>
<form>
<div class="form-group">
<label>Filter</label>
<input type="text" class="form-control" data-ng-model="customerFilter.name">
</div>
</form>
<br>
<table class="table table-striped table-hover table-responsive">
<tr>
<th>#</th>
<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>
<th>View Order</th>
</tr>
<tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
<td>{{$index + 1 }}</td>
<td>{{cust.name | uppercase}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date}}</td>
<td><a ui-sref="order{{ cust.id }}" class="color-violet"><i class="fa fa-shopping-cart"></i></a></td>
</tr>
</table>
<span>Total customers: {{ customers.length}}</span>
</div>
orders.html
<!-- views/orders.html -->
<div class="container">
<div class="row" ng-cloack>
<h2>Orders</h2>
<br>
<table class="table table-striped table-hover table-responsive">
<tr>
<th>#</th>
<th>Product</th>
<th >Total</th>
</tr>
<tr ng-repeat="order in orders">
<td>{{$index + 1 }}</td>
<td>{{order.product}}</td>
<td>{{order.total | currency}}</td>
</tr>
</table>
</div>
app.js (function(){
var app = angular.module('customersApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("index.html")
$stateProvider
.state('home',
{
url:'/',
controller:'CustomersController',
templateUrl:'views/customers.html'
})
.state('order',{
url:'/order/:customerId',
controller: 'OrdersController',
templateUrl:'views/orders.html'
});
});
}());
和客户的控制者
(function() {
var CustomersController = function ($scope) {
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [
{id:1, joined: '2000-12-02', name:'Ali', city:'Montreal', orderTotal: 9.9956, orders: [ {id: 1, product:'Shoes', total: 9.9956}]},
{id:2, joined: '1965-01-25',name:'Zoe', city:'Montreal', orderTotal: 19.99, orders: [{id: 2, product:'Baseball', total: 9.995}, {id: 3, product:'Bat', total: 9.9956}]},
{id:3, joined: '1944-06-15',name:'Tina', city:'Toronto', orderTotal:44.99, orders: [{id: 4, product: 'Headphones', total: 44.99}]},
{id:4, joined: '1995-03-28',name:'Azad', city:'Vancouver', orderTotal:101.50, orders: [{id: 5, product: 'Kindle', total: 101.50}]}
];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
};
CustomersController.$inject = ['$scope'];
angular.module('customersApp')
.controller('CustomersController', CustomersController);
}());
和ordercontroller.js
(function() {
var OrdersController = function ($scope, $stateParams) {
// $routeParams.customerId comes from routing configuration customerId after PATH
var customerId = $stateParams.customerId;
$scope.orders = null;
function init() {
//Search the customers for the customerId
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:'Ali', city:'Montreal', orderTotal: 9.9956, orders: [ {id: 1, product:'Shoes', total: 9.9956}]},
{id:2, joined: '1965-01-25',name:'Zoe', city:'Montreal', orderTotal: 19.99, orders: [{id: 2, product:'Baseball', total: 9.995}, {id: 3, product:'Bat', total: 9.9956}]},
{id:3, joined: '1944-06-15',name:'Tina', city:'Toronto', orderTotal:44.99, orders: [{id: 4, product: 'Headphones', total: 44.99}]},
{id:4, joined: '1995-03-28',name:'Azad', city:'Vancouver', orderTotal:101.50, orders: [{id: 5, product: 'Kindle', total: 101.50}]}
];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
init();
};
OrdersController.$inject = ['$scope', '$routeParams'];
angular.module('customersApp')
.controller('OrdersController', OrdersController);
}());
一切看起来都不错,但我可以意识到这个错误来自哪里。
由于
答案 0 :(得分:2)
您必须定义要在状态(顺序)中使用的参数。为此,请将状态视为函数,并将所有参数添加为对象:
<a ui-sref="order({ customerId: cust.id })" class="color-violet"><i class="fa fa-shopping-cart"></i></a>