ionic对话框

最新推荐文章于 2019-06-23 21:56:53 发布

已成回忆1234

最新推荐文章于 2019-06-23 21:56:53 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/dxt0528/article/details/78827871

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link href="lib/css/ionic.min.css" rel="stylesheet" />
<script src="lib/js/ionic.bundle.min.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading, $ionicPopup) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});

$timeout(function() {
$ionicLoading.hide();
$scope.users = [{
name: '张三',
age:18
}, {
name: '李四',
age:19
}, {
name: '王五',
age:20
}];
}, 2000);

$scope.showPopup = function() {
$scope.data = {}

// 自定义弹窗
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
// 不允许用户关闭，除非输入 wifi 密码
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
},
]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
$timeout(function() {
myPopup.close(); // 3秒后关闭弹窗
}, 3000);
};
// confirm 对话框
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
});
confirmPopup.then(function(res) {
if(res) {
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
};

// alert（警告）对话框
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
};
});
</script>
</head>

<body ng-app="ionicApp" ng-controller="AppCtrl">

<ion-view title="Home">
<ion-header-bar>
<h1 class="title">The Stooges</h1>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item ng-repeat="u in users" href="#">姓名:{{u.name}}  年龄:{{u.age}}</ion-item>
<ion-item>
<button class="button button-dark" ng-click="showPopup()">
弹窗显示
</button>
<button class="button button-primary" ng-click="showConfirm()">
确认对话框
</button>
<button class="button button-positive" ng-click="showAlert()">
警告框
</button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</body>

</html>

已成回忆1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic对话框

angular.module('ionicApp', ['ionic']).controller('AppCtrl', function($scope, $timeout, $ionicLoading, $ionicPopup) {$ionicLoading.show({content: 'Loading',animation: 'fade-in',showBackdrop:
复制链接

扫一扫