angular.js - Angular melaksanakan menangkap id item yang dipilih dan menghantar id ini sebagai parameter ke halaman yang dilompat

Question

Gunakan ng-repeat dalam arahan untuk menggelung dan memaparkan senarai produk

angular.module("goodsInsert",[])
    .directive("myDirective",function(){
        return{
            restrict:'EA',
            template:'<p class="goods_wrap"  ng-repeat="item in data" ng-click="toPage({{item.id}})">'
            +'<p class="goods_left"><img src="{{item.images}}" alt="" /></p>'
            +'<p class="goods_right">'
            +'<p class="goods_describe">{{item.name}}</p>'
            +'<p class="goods_info"><p>{{item.price | currency:"￥"}}</p><p>已售{{item.saleCount}}件</p></p>'
            +'<p class="user_wrap"><img src="{{item.producer.header}}" alt="" class="user"/><p class="grey">{{item.producer.lastname}}</p></p>'
            +'</p>'
            +'</p>'

        };
    });

Tentukan parameter lompatan dalam pengawal, utama ialah halaman paparan senarai produk, reka bentuk ialah halaman butiran produk yang dipilih untuk lompat

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);
})

Tiada lompatan pada masa ini dan acara klik tidak boleh dicetuskan Menukar ng-klik yang ditambahkan dalam ng-ulang kepada toPage(id) boleh melompat, tetapi parameter yang diluluskan pada masa ini masih dikodkan dengan keras. pengawal. $scope.data[0].id, bukannya mengklik pada produk yang sepadan
Adakah anda mempunyai sebarang penyelesaian?

Answer 1

Cari jawapannya! !
ng-click=toPage(item.id)
Alih keluar {{}} dalam parameter dan biarkan yang lain sahaja, ia akan menyelesaikan masalah

Answer 2

angular.module("goodsInsert",[])
    .directive("myDirective",function(){
        return{
            restrict:'EA',
            template:'<p class="goods_wrap"  ng-repeat="(item,key) in data" ng-click="toPage(key)">'
            +'<p class="goods_left"><img src="{{item.images}}" alt="" /></p>'
            +'<p class="goods_right">'
            +'<p class="goods_describe">{{item.name}}</p>'
            +'<p class="goods_info"><p>{{item.price | currency:"￥"}}</p><p>已售{{item.saleCount}}件</p></p>'
            +'<p class="user_wrap"><img src="{{item.producer.header}}" alt="" class="user"/><p class="grey">{{item.producer.lastname}}</p></p>'
            +'</p>'
            +'</p>'

        };
    });

$scope.toPage=function(key){
        if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
    $scope.$apply();
}
        alert(111);
        $state.go('index.detail',{ID:$scope.data[key].id});
    }

Answer 3

Em. Kaedah dalam ng-click melepasi parameter dan tidak memerlukan {{}}