如上圖 我想做一個(gè)這種界面的效果 選中列表中的值 除了選中貓糧是跳轉(zhuǎn)，其他的選項(xiàng)均在本頁(yè)面異步刷新相應(yīng)的數(shù)據(jù)，因?yàn)槭褂昧藆i-bs里面的modal
目前想的是兩種方式：1.選中后改變相應(yīng)的路由參數(shù) 再次$http請(qǐng)求
2.直接跳轉(zhuǎn)到相應(yīng)的路由 參數(shù)的頁(yè)面
但是第2種如果在本頁(yè)面多次選擇的話 到最后點(diǎn)擊返回按鈕就很麻煩
請(qǐng)教一下這個(gè)應(yīng)該怎么做？
// 資產(chǎn)選擇模態(tài)框
$scope.items = [
{assetName: '全部理財(cái)', 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: '發(fā)財(cái)喵', type: '8', holdType: '1', redeemType: '1'},
{assetName: '貓糧', type: '3', holdType: '7', redeemType: '7'}
];
$scope.openModal = function (size) {
var triangle = jQuery('.triangle');
//這里很關(guān)鍵,是打開模態(tài)框的過程
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',//模態(tài)框的頁(yè)面內(nèi)容,這里的url是可以自己定義的,也就意味著什么都可以寫
controller: 'ModalInstanceCtrl',//這是模態(tài)框的控制器,是用來控制模態(tài)框的
size: size,//模態(tài)框的大小尺寸
resolve: {//這是一個(gè)入?yún)?這個(gè)很重要,它可以把主控制器中的參數(shù)傳到模態(tài)框控制器中
items: function () {//items是一個(gè)回調(diào)函數(shù)
return $scope.items;//這個(gè)值會(huì)被模態(tài)框的控制器獲取到
}
}
});
modalInstance.opened.then(function () {
triangle.css({transform: 'rotate(270deg)'})
});
modalInstance.result.then(function (selectedItem) {//這是一個(gè)接收模態(tài)框返回值的函數(shù)
// $scope.selected = selectedItem;//模態(tài)框的返回值
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) {
//這是模態(tài)框的控制器,記住$uibModalInstance這個(gè)是用來調(diào)用函數(shù)將模態(tài)框內(nèi)的數(shù)據(jù)傳到外層控制器中的,items則上面所說的入?yún)⒑瘮?shù),它可以獲取到外層主控制器的參數(shù)
$scope.items = items;//這里就可以去外層主控制器的數(shù)據(jù)了
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也是在模態(tài)框關(guān)閉的時(shí)候進(jìn)行調(diào)用,而它返回的是一個(gè)reason
$uibModalInstance.dismiss('cancel');
triangle.css({transform: 'rotate(360deg)'})
};
})上面沒有controller的是當(dāng)前頁(yè)面的open modal動(dòng)畫及數(shù)據(jù)
下面是modal的controller
1
0
0
