angular.js - angular实现捕获选中项id并将此id作为参数传递给跳转的页面
本文介绍了angular.js - angular实现捕获选中项id并将此id作为参数传递给跳转的页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在指令中使用ng-repeat循环显示出商品列表
angular.module("goodsInsert",[])
.directive("myDirective",function(){
return{
restrict:'EA',
template:'<div class="goods_wrap" ng-repeat="item in data" ng-click="toPage({{item.id}})">'
+'<div class="goods_left"><img src="{{item.images}}" alt="" /></div>'
+'<div class="goods_right">'
+'<div class="goods_describe">{{item.name}}</div>'
+'<div class="goods_info"><p>{{item.price | currency:"¥"}}</p><p>已售{{item.saleCount}}件</p></div>'
+'<div class="user_wrap"><img src="{{item.producer.header}}" alt="" class="user"/><p class="grey">{{item.producer.lastname}}</p></div>'
+'</div>'
+'</div>'
};
});
在controller中定义跳转传参,main为产品列表展示页,design为选中跳转的商品详情页
myApp.controller("mainCtrl", function($scope,$http,goodsService,$state) {
var data=goodsService.getNewGoods();
data.then(function(data){
$scope.data=data.results;
},function(data){
$scope.error=data;
});
$scope.toPage=function(id){
if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
$scope.$apply();
}
alert(111);
$state.go('index.detail',{ID:$scope.data[0].id});
}
});
myApp.controller('designCtrl',function($scope,$state,$stateParams){
var receivedId = $stateParams.ID;
alert(receivedId);
})
此时并不跳转,也不能触发点击事件,将在ng-repeat中添加的ng-click改为toPage(id)可以跳转,但此时传递的参数依然是controller中写死的$scope.data[0].id,不是点击对应的商品
请问各位大神有什么解决办法嘛?
解决方案
找到答案啦!!
ng-click=toPage(item.id)
去掉参数中的{{}},其他都不用动,就可以解决哦
这篇关于angular.js - angular实现捕获选中项id并将此id作为参数传递给跳转的页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文