angular.js - angularjs 使用modal 选中modal中的li列表后传值

问题描述

问 题

如上图 我想做一个这种界面的效果 选中列表中的值 除了选中猫粮是跳转，其他的选项均在本页面异步刷新相应的数据，因为使用了ui-bs里面的modal

目前想的是两种方式：1.选中后改变相应的路由参数 再次$http请求
2.直接跳转到相应的路由+参数的页面
但是第2种如果在本页面多次选择的话 到最后点击返回按钮就很麻烦
请教一下这个应该怎么做？

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

上面没有controller的是当前页面的open modal动画及数据
下面是modal的controller

解决方案

方法2+location.path().replace

这篇关于angular.js - angularjs 使用modal 选中modal中的li列表后传值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！