在html中渲染angular时出错
Error on rendering angular in html
我有一个Angular项目,在一个视图中你有一个订单列表,这些订单你只会看到标题,一旦你点击那个标题,你应该被list.id
重定向到一个新的视图,在那里你会看到订单的全部内容。
这是你应该看到订单标题的html
<a ng-href="#/orders/{{list.id}}" ng-repeat="list in detalleOrden">
<h5>Orden {{list.id}}</h5>
<p>{{list.unidadEjec}}</p>
</a>
和这里的HTML,您应该看到订单的完整内容。查看上面的HTML ng-href="#/orders/{{list.id}}"
<table class="table">
<tbody>
<tr>
<th>Supervisor</th>
<td ng-bind="list.supervisor"></td>
</tr>
<tr>
<th>Responsable:</th>
<td>{{list.responsable}}</td>
</tr>
<tr>
<th>Solicitante:</th>
<td>{{list.solicitante}}</td>
</tr>
<tr>
<th>Unidad ejecutora:</th>
<td>{{list.unidadEjec}}</td>
</tr>
</tbody>
</table>
我没有使用任何ng-repeat,应该吗?
这里的代码:
$routeProvider
.when('/orders', {
templateUrl: 'views/main.html',
controller: 'OrderDetailsCtrl',
resolve: {
orders: function(Order) {
return Order.list();
}
}
})
.when('/orders/:id', {
templateUrl: 'views/order-detail.html',
controller: 'OrderIdCtrl',
resolve: {
order: function(Order, $routeParams) {
Order.list().then(function(orders) {
for(var i = 0; i < orders.length; i++) {
if(orders[i].id === $routeParams.id) {
return orders[i];
}
}
return null;
});
}
}
})
控制器 .controller('OrderDetailsCtrl', function ($scope, $routeParams, $log, $rootScope, Order) {
Order.list().then(function(orders) {
$scope.detalleOrden = orders;
}
});
.controller('OrderIdCtrl', function ($scope, $routeParams, $log, $rootScope, Order) {
$scope.order = {};
Order.list().then(function(orders) {
for(var i = 0; i < orders.length; i++) {
if(orders[i].id === $routeParams.id) {
$scope.order = orders[i];
}
}
}, function() {
$log('error');
});
});
这里是service
.factory('Order', function ($q) {
return {
list: function() {
var deferred = $q.defer();
deferred.resolve([{
id: '12423',
title: 'Detalles de la orden',
supervisor: 'Someone',
responsable: 'Someone Else',
solicitante: 'Recope',
unidadEjec: 'Grupo Planificador Belén'
}, {
id: '56456',
title: 'Detalles de la orden',
supervisor: 'Carlos Blabla',
responsable: 'Alberto Blablo',
solicitante: 'Recope',
unidadEjec: 'Grupo VEINSA'
}]);
return deferred.promise;
}
};
});
所以,我的问题是:当我点击订单的标题时,我成功地重定向到新视图,但我无法可视化内容
您不需要使用任何ng-repeat
,只使用order
代替,看:
<table class="table">
<tbody>
<tr>
<th>Supervisor:</th>
<td>{{order.supervisor}}</td>
</tr>
<tr>
<th>Responsable:</th>
<td>{{order.responsable}}</td>
</tr>
<tr>
<th>Solicitante:</th>
<td>{{order.solicitante}}</td>
</tr>
<tr>
<th>Unidad ejecutora:</th>
<td>{{order.unidadEjec}}</td>
</tr>
</tbody>
</table>
你必须在table
中使用变量order
而不是list
。我认为table
在详细视图中。
对于uri /orders/:id
,您在控制器OrderIdCtrl
中有order
变量
相关文章:
- 使用Angular获取数据API调用时出错
- 尝试使用Angular.js显示验证消息时出错
- 使用require在Angular 2中设置templateUrl时出错
- 使用Angular.js在下拉列表中使用mulitple时出错
- Angular.ui - 将数据传递到模态时出错
- 在 angular 中混合 javascript 和打字稿时出错
- 无法将ngCookie添加到Angular Module,使用Bower时出错
- 使用angular.copy()复制ngResource返回的数据时出错
- 在Angular中绑定时出错
- 未知提供程序尝试在Angular控制器上注入依赖项时出错
- 使用angular.js进行ng重复时出错
- 使用Angular发送ajax请求以获取.json文件时出错
- 在Angular 2项目中运行ng serve -aot命令出错
- 升级到angular 1.2.22时出错
- 让AngulaJS + Angular AMD + RequireJS与Karma和Jasmine一起工作时出错
- gMarker.键未定义,它是必需的!!angular和Google地图应用出错
- 使用 PHP 将记录保存在 Angular 中时出错
- 在使用Angular和Web Workers时从作用域中克隆元素出错
- 使用angular资源读取json文件时出错
- 多重选择设置导致angular出错