angular.js - angularjs uses modal to select the li list in modal and then pass the value

Question

As shown in the picture above, I want to create the effect of this kind of interface. Except for selecting cat food, the values ​​in the selection list will jump. The other options will refresh the corresponding data asynchronously on this page because the modal in ui-bs is used.

Currently I am thinking of two ways: 1. After selecting, change the corresponding routing parameters and make another $http request
2. Jump directly to the corresponding routing parameters page
But if the second method is used here, If you select the page multiple times, it will be very troublesome to click the return button at the end
Could you please tell me how to do this?

        // 资产选择模态框
        $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)'})
        };
    })

The one without controller above is the open modal animation and data of the current page
The following is the modal controller

Answer 1

Method 2+location.path().replace