angular.js - angularjs menggunakan modal untuk memilih senarai li dalam modal dan kemudian lulus nilai

Question

Seperti yang ditunjukkan dalam gambar di atas, saya ingin mencipta kesan antara muka jenis ini Kecuali untuk memilih makanan kucing, nilai dalam senarai pilihan akan menyegarkan data yang sepadan secara tidak segerak halaman kerana modal dalam ui-bs digunakan

Pada masa ini saya memikirkan dua cara: 1. Selepas memilih, tukar parameter penghalaan yang sepadan dan buat permintaan $http yang lain
2. Lompat terus ke halaman penghalaan parameter yang sepadan
Tetapi jika kaedah kedua ialah digunakan di sini, Jika anda memilih halaman beberapa kali, ia akan menjadi sangat menyusahkan untuk mengklik butang kembali pada penghujung
Bolehkah anda beritahu saya bagaimana untuk melakukan ini?

        // 资产选择模态框
        $scope.items = [
            {assetName: '全部理财', type: '0', holdType: '0', redeemType: '0'},
            {assetName: '活期猫', type: '7', holdType: '4', redeemType: '4'},
            {assetName: '月月涨', type: '1', holdType: '5', redeemType: '5'},
            {assetName: '季度喵', type: '4', holdType: '3', redeemType: '3'},
            {assetName: '半年喵', type: '5', holdType: '6', redeemType: '6'},
            {assetName: '九九喵', type: '6', holdType: '9', redeemType: '9'},
            {assetName: '年丰收', type: '2', holdType: '12', redeemType: '12'},
            {assetName: '发财喵', type: '8', holdType: '1', redeemType: '1'},
            {assetName: '猫粮', type: '3', holdType: '7', redeemType: '7'}
        ];
        $scope.openModal = function (size) {
            var triangle = jQuery('.triangle');
            //这里很关键,是打开模态框的过程
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',//模态框的页面内容,这里的url是可以自己定义的,也就意味着什么都可以写
                controller: 'ModalInstanceCtrl',//这是模态框的控制器,是用来控制模态框的
                size: size,//模态框的大小尺寸
                resolve: {//这是一个入参,这个很重要,它可以把主控制器中的参数传到模态框控制器中
                    items: function () {//items是一个回调函数
                        return $scope.items;//这个值会被模态框的控制器获取到
                    }
                }
            });
            modalInstance.opened.then(function () {
                triangle.css({transform: 'rotate(270deg)'})
            });
            modalInstance.result.then(function (selectedItem) {//这是一个接收模态框返回值的函数
                // $scope.selected = selectedItem;//模态框的返回值
                console.log(selectedItem);
                console.log($scope.selected);
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
                triangle.css({transform: 'rotate(360deg)'})
            });
        };
        
        
        
        
            .controller('ModalInstanceCtrl', function ($scope,$http, $uibModalInstance,$location,items) {
        //这是模态框的控制器,记住$uibModalInstance这个是用来调用函数将模态框内的数据传到外层控制器中的,items则上面所说的入参函数,它可以获取到外层主控制器的参数
        $scope.items = items;//这里就可以去外层主控制器的数据了
        var triangle = jQuery('.triangle');
        $scope.selected = {
            item: $scope.items[0]
        };
        $scope.selasset = function (type,holdType,redeemType) {
            if(type == '3'){
                $location.path('/grain')
            }else {
                // $location.path('/asset/'+type+'/'+holdType+'/'+redeemType);
            }
            $uibModalInstance.close($scope.selected.item);
            // $uibModalInstance.close();
            triangle.css({transform: 'rotate(360deg)'})
        };
        $scope.cancelModal = function () {
            //dismiss也是在模态框关闭的时候进行调用,而它返回的是一个reason
            $uibModalInstance.dismiss('cancel');
            triangle.css({transform: 'rotate(360deg)'})
        };
    })

Yang tanpa pengawal di atas ialah animasi modal terbuka dan data halaman semasa
Berikut ialah pengawal modal

Answer 1

Kaedah 2+lokasi.path().ganti