I am using ionic to make a mobile app.I want to use a popup window to collect two pieces of data, a username and a password. I looked through a lot of website, it only shows how popup window can collect one piece of data, but not two. Also, I would like to make the popup window a purple color. How can I do that?
$scope.create = function() {
$scope.data = {};
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.one">',
style: 'background-color:purple;',
title: 'Enter Wi-Fi Password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-balanced',
onTap: function(e) {
if ((!$scope.data.one)&&(!$scope.data.two)) {
e.preventDefault();
} else {
return $scope.data;
}
}
}
]
});
}
You can achieve this using $ionicModal
Here is a working example
HTML
<script id="add-or-edit-cart.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">{{ action }} Page</h1>
<div class="buttons">
<button ng-click="deleteCart()" class="button button-icon icon ion-close"></button>
</div>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
Dummy Text
</label>
</div>
</ion-content>
</ion-modal-view>
</script>
Add ng-click to the View cart present in the footer
<ion-footer-bar class="bar-footer btn-footer bar-light">
<div class="row">
<div class="col">
<button ng-click="vm.showCart()" ng-controller="OverviewController as vm" class="button button-block button-positive"> View cart Page </button>
</div>
<div class="col">
<button class="button button-block button-calm"> View checkout page </button>
</div>
</div>
</ion-footer-bar>
JS
Add the Following Controller
.controller('OverviewController', function ($scope, $ionicModal) {
var vm = this;
$ionicModal.fromTemplateUrl('add-or-edit-cart.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
vm.showCart = function () {
$scope.Cart = {};
$scope.action = 'Cart';
$scope.isAdd = true;
$scope.modal.show();
};
$scope.deleteCart = function () {
$scope.modal.hide();
};
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
return vm;
and here is working CodePen
Related
I'm trying to execute Javascript in a ionic modal (HTML) page. It may sound weird, because normally it think you put JS code into a JS file and use data binding to work with js in html, right? But in this case i only can change this specific html file.. So this is what i tried:
<div class="modal">
<ion-header-bar class="bar-secondary">
<h1 class="title">TEST-TITLE</h1>
<button class="button button-clear button-dark" ng-click="modal.hide()"><i class="icon ion-close"></i></button>
</ion-header-bar>
<ion-content class="has-header" delegate-handle="TEST">
<div class="list card">
<div class="item item-body" ng-App="myApp" ng-controller="myCtrl">
<img src="pathToFile.jpg" class="full-image">
<p>
TEXT
</p>
<button class="button button-positive" ng-click="testFunction()">
TEST-BUTTON
</button>
</div>
</div>
</ion-content>
</div>
<script>
var app = angular.module('myApp', ['ionic']);
app.controller('myCtrl', function($scope) {
$scope.testFunction = function () {
$scope.firstName = "John";
$scope.lastName = "Doe";
alert($scope.firstName);
};
});
</script>
But i cannot run the function "testFunction()" after clicking on TEST-BUTTON. Does anyone know what to do?
Update:
This is how the modal is called in the extended js file:
// Fetch the modal and store it in scope
$ionicModal.fromTemplateUrl('pathToModal', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
I have created a ng-repeat of blocks where I would like to edit a block in a modal window and cancel the window to discard any changes.
I have managed to get the modal window working and editing blocks as I want however I am trying to use angular.copy to create a backup of the original element and set it when cancel is clicked.
here is my html for my ng-repeat:
<div class="container" style="max-width: 600px;">
<div ng-repeat="block in blocks" class="text-muted" ng-drop="true" ng-drop-success="onDropComplete($index, $data ,$event)">
<div class="row" ng-show="textBlock(block)" ng-click="showEditButtons()" ng-drag="true" ng-drag-data="block">
<h4> {{ block.title }} </h4>
<p> {{ block.body }} </p>
<button class="btn btn-default" ng-show="showButtons" ng-click="editBlock(block); modalUpdate(block)">Edit!</button>
<button class="btn btn-default" ng-show="showButtons" ng-click="deleteBlock(block)">Delete!</button><br>
<br>
</div>
</div>
</div>
and here is my html for the modal:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="block.title" ng-model="titleText"/>
<input class="form-control" placeholder="Main Body" type="text" ng-model="block.body" ng-model="bodyText"/>
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
and here is the modal part of the controller:
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
$scope.saveBlock = function () {
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
block = $scope.backUp;
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
However every time I click cancel the changes to the block are still saved and nothing is reverted.
Any help would be awesome!
Try to remove the line
$scope.cancel = function () {
// block = $scope.backUp; <--- this one
$uibModalInstance.dismiss('cancel');
};
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
// the above line does not create new instance of $scope.block instead links to block, so whenever $scope.block gets updated, block also gets updated
Change Your code as :
HTML :
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="data.title" ng-model="titleText" />
<input class="form-control" placeholder="Main Body" type="text" ng-model="data.body" ng-model="bodyText" />
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
Have changed ng-model to bind to data object
JS :
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function ($scope, $uibModalInstance, block) {
$scope.data = {};
$scope.data.title = block.title;
$scope.data.body = block.body;
$scope.saveBlock = function () {
block.title = $scope.data.title;
block.body = $scope.data.body;
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
Have assigned to $scope.block only if saveBlock is triggered otherwise nothing happens on cancel
I have an Angular application which contains a simple timer that resets on a mousemove event. So far I have been able to handle this by adding the ng-mousemove event to my outer most scope. However, when a Angular Bootstrap Modal appears, it is positioned in the DOM after that scope, so the event gets ignored until the modal is closed.
My current application is structured as follows:
<!DOCTYPE html>
<html ng-app="app">
<head>
...
</head>
<body>
<div data-ng-controller="shell as vm">
<div ng-mousemove="vm.handleMouseMove()">
...
</div>
// MODAL APPEARS DOWN HERE
<div tabindex="-1" role="dialog" class="modal fade ng-isolate-scope warning in" ...>
</div>
</body>
</html>
Is there a way to:
a.) Add the ng-mousemove directive to the modal wrapper
or
b.) Move the modal into my scope, so that shell is a parent to the modal controller.
Not sure why you need that timer reset behaviour but you could do it like this.
Add your shell controller and ng-mousemove to the body-tag and style your body/html to fill the whole page with css width: 100%; height:100%.
Please have a look at the demo below and this jsfiddle.
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('shell', function($scope, $interval, $modal) {
$scope.test = 'hello world';
this.counter = 0;
var vm = this;
this.moveHandler = function() {
console.log('mouse moved, reset counter!');
vm.counter = 0;
};
var timer = function(iterCount) {
console.log('timer tick', vm.counter);
vm.counter++;
};
var intervalPromise = $interval(timer, 100);
$scope.$on("$destroy", function handler() {
// destruction code here
$interval.cancel(intervalPromise); // stop interval on destroy of ctrl.
});
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
});
// modal code from angular-ui-bootstrap demo
app.controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
html, body {
width: 100%;
height: 100%;
}
<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<body class="wrapper" ng-app="myApp" ng-controller="shell as vm" ng-mousemove="vm.moveHandler()">
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
{{test}}
</div>
</body>
I am new to Ionic and AugularJS and I am having a problem opening up a modal box upon click on a checkbox/radio button on the third option for hashtag search in the settings page. I have included an ng-controller and ng-click to take action. I looked in the debugger and it displayed an error:
GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]
I know that 404 Not Found means it didn't find the templateUrl but every nav page I have is in the index.html and they work fine except hashtag-modal.html in the app.js file. Why isn't it working and how do I resolve this issue?
app.js
// Navigation pages
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('hashtag-modal', {
url: '/hashtag-modal',
templateUrl: 'hashtag-modal',
controller: 'hashtag-modalCtrl'
})
$urlRouterProvider.otherwise("/index"); // if no url found, go back to index
})
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
};
}]);
// hashtag search modal
app.controller('hashtag-modalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
index.html
<!-- SETTINGS -->
<script id="settings.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Settings" hide-back-button="false">
<ion-content class="padding">
<!-- The content of the page -->
<p>Check one of the options below to set how you wish to categorize and view your Instagram photos.
</p>
<div class="settings-list">
<label class="item item-radio">
<input type="radio" name="settings-group" value="recent">
<div class="item-content">
Recent
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="settings-group" value="popular">
<div class="item-content">
Most Popular
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();modal.show();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</ion-content>
</ion-view>
</script>
<!-- HASHTAG SEARCH MODAL -->
<script id="hashtag-modal.html" type="text/ng-template">
<ion-modal-view hide-back-button="false">
<ion-header-bar>
<h1 class="title">Hashtag Search</h1>
</ion-header-bar>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-content>
</ion-modal-view>
</script>
Revised app.js
I added an $ionicModal to the hashtagController but it is said Error: $ionicModal is undefined. Where else is it undefined?
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope, $ionicModal)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
}
}]);
Revised label
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
ionic modal has nothing to do with routes.
You just load a static html template from server, and that same html is shown in ionic modal with all the bindings.
Instead of declaring a seperate controller, move it inside the same controller :
app.controller('hashtagController', ['$scope', function($scope, $ionicModal) {
$scope.hashtag = function() {
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
};
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
$scope.$on('modal.hidden', function() {
// Execute action
});
$scope.$on('modal.removed', function() {
// Execute action
});
}
Then in your HTML :
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
Ionic has a nice codepen example showing how to open a modal with an ng-click
http://codepen.io/ionic/pen/gblny
I'd like to ask the user to choose among a few possibility but without breaking the style of my page. So I'd like to prompt an alert box or something like that BUT with a dropdown list () in it.
Is it possible?
If so how?
According to the documentation
Official Example
Add angular-bootstrap.js in your project, and 'ui.bootstrap' in your module
in HTML
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
JS
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};