I want to open another modal window when to click on link in first modal window.
When click on Forgot password I want to open another modal window forgotpassword.html
I tried to solve using modal JS.
Here is code:
IONIC html
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()"> <i class="icon ion-close-round"></i></button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<label class="item borderbottomnone">
<button class="button button-block button-positive" type="submit">Log in</button>
<span class="loginforgotpassword"><a ng-controller='MainCtrl' ng-click="openModal()">>Forgot password</a></span>
<span class="loginregister">REGISTER</span>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
JS
app.controller('MainCtrl', function($scope, $ionicModal) {
$scope.contact = {
name: 'Mittens Cat',
info: 'Tap anywhere on the card to open the modal'
}
$ionicModal.fromTemplateUrl('forgotpassword.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal
})
$scope.openModal = function() {
$scope.modal.show()
}
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
Chances are that your modal object is overriden by parent modal object, so change modal object name like this
$ionicModal.fromTemplateUrl('forgotpassword.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.forgotPasswordModal = modal
})
$scope.openModal = function() {
$scope.forgotPasswordModal.show()
}
$scope.closeModal = function() {
$scope.forgotPasswordModal.hide();
};
Related
$modal is called in the $ngonint hook. First time when controller loads, it works perfectly. But for the second time, it is not showing up when the controller loads.
Expectation:
Consider two controllers first and second.
Navigate to second controller from first controller by clicking link.
We need to show below modal when page loads whenever navigate to second controller page.
Actual Result:
For the first time, when it navigate to second controller, it showed the modal as expected. once go back to first page and come again to second controller, modal is not showed up.
Can anyone help me to solve this issue ? Thanks.
Below are the code sample:
Controller
$onInit() {this.showModal();} // Need to show modal when page loads
public showModal= function () {
var modalInstance = $modal.open({
template: ModalTemplate,
controller: [
'$scope',
'$modalInstance',
function ($scope, $modalInstance) {
$scope.answer = '';
$scope.close = function () {
$modalInstance.dismiss();
};
$scope.next = function () {
$modalInstance.close($scope.answer);
};
},
],
windowClass: 'open-account'
});
modalInstance.result.then((response) => {
console.log(response);
})
}
ModalTemplate.html
<div class="modal-header">
<button type="button" class="close" ng-click="close()" aria-hidden="true">
<fa-icon icon="times" prefix="fal" class="close-fa fa-lg"></fa-icon>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<div class="form-group radio-group-label">
<label class="control-label">
Click
</label>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label class="control-label" for="answer-yes">
<input type="radio" name="answer" ng-model="answer" value="yes"
id="answer-yes" />
Yes
</label>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label class="control-label" for="answer-no">
<input type="radio" name="answer" ng-model="answer" value="no"
id="answer-no" />
No </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-disabled="!answer" ng-click="next()">Next</button>
</div>
I'm trying to save the data from a form, which is in a modal, to local storage. But, for some reason, the data is coming up blank.
For example, when I get the data, it returns this:
, , , , ,
instead of this:
Name, Email, Year, Major, Phone#
So, it seems like it is saving a blank entry. I'm very new to AngularJS so I can't figure out how to fix it. If anyone could help me out that would be amazing!
controllers.js
angular.module('starter.controllers', [])
.controller('AppController',['$scope', 'getLocalStorage', '$ionicModal', function ($scope, getLocalStorage, $ionicModal) {
$scope.todos = getLocalStorage.getTodos();
$scope.clearSelected = function () {
$scope.todos = $scope.todos.filter(function (item) {
return !item.selected;
});
getLocalStorage.updateTodos($scope.todos);
};
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
animation: 'slide-in-up',
focusFirstInput: true
});
}])
.controller('ModalCtrl', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
$scope.todos = getLocalStorage.getTodos();
$scope.addTodo = function () {
$scope.todos.push(
{'name': $scope.name,
'email': $scope.email,
'year': $scope.year,
'major': $scope.major,
'phone': $scope.phone,
'selected': false});
$scope.modal.hide();
getLocalStorage.updateTodos($scope.todos);
};
}])
.controller('InfoCtrl', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
$scope.todos = getLocalStorage.getTodos();
}
]);
services.js
angular.module('starter.services', [])
var storageService = angular.module('storageService', []);
storageService.factory('getLocalStorage', function () {
var todoList = {};
return {
list: todoList,
updateTodos: function (todosArr) {
if (window.localStorage && todosArr) {
localStorage.setItem("todos", angular.toJson(todosArr));
}
//update the cached version
todoList = todosArr;
},
getTodos: function () {
todoList = angular.fromJson( localStorage.getItem("todos") );
return todoList ? todoList : [];
}
};
})
html
<ion-view view-title="TechProf">
<ion-content>
<button class="button button-full button-positive" ng-click="modal.show()">OPen Modal</button>
<ion-list>
<h3>List</h3>
<ul class="list">
<li ng-repeat="s in todos" class="item">
<input ng-model="s.selected" type="checkbox" />
<span ng-class="{'selected': todo.selected}">{{ s.name }}, {{ s.email }}, {{ s.year }},{{ s.major }}, {{ s.phone }}</span>
</li>
</ul>
<button class="button button-full button-positive" ng-click="clearSelected()">Delete Selected</button>
</ion-list>
</ion-content>
<script id="modal.html" type="text/ng-template">
<div class="modal" ng-controller="ModalCtrl">
<header class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</header>
<ion-content has-header="true">
<form name="frm" ng-submit="addTodo()">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="name" required>
</label>
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="email" required>
</label>
<label class="item item-input item-select">
<div class="input-label">Year</div>
<select ng-model="year" required>
<option selected>Freshman</option>
<option >Sophmore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</label>
<label class="item item-input">
<input type="text" placeholder="Major" ng-model="major" required>
</label>
<label class="item item-input">
<input type="number" placeholder="Phone" ng-model="phone" ng-minlength="10" required>
</label>
<button class="button button-full button-positive" ng-disabled="frm.$invaild">Submit</button>
</div>
</form>
</ion-content>
</div>
</script>
</ion-view>
Working Plunker
ngModel
One of the keys to getting this is move all of the form inputs ng-model point to an object.property like this answer suggests.
Basically that means you need to do something like this for your HTML inputs:
<input type="text" ng-model="info.name">
And put this in your controller:
$scope.info = {};
Because of the ngModel you'll need to change the $scope.addTodo function. While you're at it you can also reset the form data on submit by adding $scope.info = {};.
$scope.addTodo = function() {
$scope.todos.push($scope.info);
$scope.modal.hide();
getLocalStorage.updateTodos($scope.todos);
$scope.info = {};
};
You can also move it from ModalCtrl to your AppController because you won't need the ModalCtrl anymore.
Modal Scope
Add scope: $scope to your modal so it uses the scope from your AppController.
Like this:
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
});
Remove
Remove the ModalCtrl controller and the ng-controller="ModalCtrl" from your HTML.
In services.js remove this (it's unnecessary):
var storageService = angular.module('storageService', []);
storageService
Change
In your getLocalStorage factory, change this var todoList = {} to this var todoList = [] because you want an array of objects so you need to start with an array.
In your modal's HTML change <ion-content has-header="true"> to <ion-content class="has-header"> as suggested by Ionic.
I am new in angular.js. I have to display in a modal the selected value of input, but I don't succeed.
I have the following inputs:
<form>
<input type="radio" name="toggleDiv" value="show" ng-click="show()" checked/> Show Text
<br>
<input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
</form>
I have to open a popup dialog and display the value of the selected value.
The moodal:
<div class="row" 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">
{{ inputsVal }}
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>
I try the following function:
app.controller('ModalDemoCtrl', function ($scope, $uibModal) {
$scope.open = function () {
$scope.inputsValue=$('input:checked').val()
return $scope.inputsValue
}}
}
your implementation is wrong.check anguar ui bootstrap modal documentation.
You have to do like this
$scope.open = function () {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.myForm;
}
}
});
in your controller,
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
in 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">
{{ items.input}}
</div>
</script>
<form>
<input type="radio" name="toggleDiv" ng-model="myForm.input" value="show" ng-click="show()" checked/> Show Text
<br>
<input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
</form>
edit
If you want to work with jquery way then you need to use $apply()
$scope.$apply(function () {
$scope.inputsValue=$('input:checked').val();
});
hope this helps .. :)
For studying angular js, I created an angular application for performing CRUD operation. I wanted to add modal form on my application. So when user click to add an item a modal form popups. For that I used angular ui of bootstrap. I tried to use the code http://plnkr.co/edit/dRahuG?p=preview which is in the ui bootstrap tutorial. It working fine in the plunker but not in application.
<div class="container" ng-controller="ClassController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Add</button>
<div ng-show="selected">aSelection from a modal: {{ selected }}</div>
</div>
And my controller is
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('ClassController',['$scope','$http','$modal','classFactory',function($scope,$http,$modal){
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.submit = function () {
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function () {
return $scope.items;
}
}
});
};
}])
When I clicked the button the screen get darken but the modal form is not coming. I don't know where I gone wrong. I am using sails.js to load the server. Moreover I am beginner in angular js.
I am using angularstrap modal service to open a login modal on any page when login is required. I open one like this:
var scope = {'foo': 'bar'};
var myOtherModal = $modal({scope: scope, template: 'modal/login.html', show: false});
the login.html contains the modal markup but it also has a controller bound to it:
<div ng-controller="SignInController" class="modal" tabindex="-1" role="dialog">
<input ng-modal="foo"/>
In the controller code, how do I get access to the foo prop on the scope that I am passing in?
What is happening to my scope? Is a scope object created by $modal the one and the same that is used by the controller? It appears that its not the case.
What is the best way to solve this problem? (Ability to open a login dialog from anywhere and have control over its scope from the controller)
Thanks
Think of opening a modal as a function call... where you pass data in and get data back. It's not the ONLY way to approach it but I think it's a clean way to approach it.
I generally follow this pattern, giving the modal it's own controller & passing data in & getting data back by passing it into the promise:
var ModalController = function($scope, $modalInstance, input) {
$scope.input = input;
var output = {
username: "",
password: ""
};
$scope.ok = function () {
$modalInstance.close($scope.output);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$scope.openModal = function(data) {
var modalInstance = $modal.open({
templateUrl: 'popupDialog.tpl.html',
controller: ['$scope', '$modalInstance', 'input', ModalController],
resolve: {
input: function() {
return data;
}
}
});
modalInstance.result.then(function(output) {
// TODO: do something with the output.username & output.password...
// call Login Service, etc.
});
};
EDIT: Adding popup html...
<form class="form-horizontal">
<div class="modal-header">
<h3>Please Log In</h3>
</div>
<div class="modal-body">
<form name="form" class="form-horizontal">
<div class="row">
<label class="col-sm-3 text-info control-label" for="inputUsername">Username</label>
<input class="col-sm-8 form-control input-sm" type="text" id="inputUsername" name="inputUsername" ng-model="output.username" />
</div>
<div class="row">
<label class="col-sm-3 text-info control-label" for="inputPassword">Password</label>
<input class="col-sm-8 form-control input-sm" type="text" id="inputPassword" name="inputPassword" ng-model="output.password" />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-primary" type="submit" ng-click="ok()">Ok</button>
<button class="btn btn-sm btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>