I would like to use a dropdown menu with AngularJs where I can open a pop up for adding extra item in a Single Page Application.
Is there such a chance in AngularJs ?
How can I achieve this?
(example)
Do you need something like http://plnkr.co/edit/LYOEntdgLbONNAzH0Ove?p=preview
Define a modal template for each value - modal1, modal2, ..
<script type="text/ng-template" id="modal1.html">
<div class="modal-header">
<h3 class="modal-title">modal1 - {{ action }}</h3>
</div>
<div class="modal-body">
modal1
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
and this function
$scope.showModal = function(action) {
if (!$scope.modes.mode) return
$scope.action = action
$scope.modal = $uibModal.open({
templateUrl: $scope.modes.mode+'.html',
scope: $scope
});
}
You call showModal from the button ng-click handlers (action is just to demonstrate the template / button relationship)
$scope.delete = function() {
$scope.showModal('delete')
}
...
Related
I have a http.get that returns an Array of Applications
<div id ="app" ng-repeat="app in applications" >
<carddata-toggle="modal" data-target="#myModal" ></card>
</div>
For each of them, i create a card (custom directive...think google now cards) and add a bootstrap modal to them. The idea being you can then click on each card and get more info about that specific app.
In the code for my Modal, I want to retrieve information about the app (for example the app name). As this is outside the for loop, Angular has lost track of my app name and therefore throws an error.
<div class="modal modal-fullscreen fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">{{app.name}} Status</h4>
</div>
I have read through the angular Api... I was looking for a way to "bind" the app name to the modal so it is aware of it, but couldn't see anything suitable. I'm new to Angular and I am therefore probably not approaching it right.
How would you approach this?
I would suggest to use Angular UI's modal service (have a look at https://angular-ui.github.io/bootstrap/#/modal).
In your controller (where you load your array of applications), inject $uibModal, e.g.
angular.module('myApp').controller('myCtrl', function ($scope, $uibModal) {
$scope.applications = [];
$scope.openModal = function(app) {
$uibModal.open({
controller: 'ModalInstanceCtrl',
templateUrl: 'myModalContent.html',
resolve: {
app: function() {
return app;
}
}
});
}
});
Then define the controller for the modal itself.
// This is the controller for the modal itself
// `app` being passed through the resolve parameter in $uibModal.open()
angular.module('myApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, app) {
$scope.app = app;
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
You can define your modal template by putting the following in your view:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{ app.title }}</h3>
</div>
<div class="modal-body" id="modal-body">
Modal body content
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
I've avoided the controllerAs syntax as you did seem to use $scope in your example.
In your view
<div id ="app" ng-repeat="app in applications" >
<carddata-toggle="modal" data-target="#myModal" ng-click="setApp(app)"></card>
</div>
<h4 class="modal-title" id="myModalLabel">{{selectedApp.name}} Status</h4>
In your controller
$scope.setApp = function(appParam){
$scope.selectedApp = appParam;
}
I'm using this modal service to show a basic dialog in an Angular app.
The implementation is simple but there are two issues:
The dialog shows but the modal-backdrop class is repeated multiple times, rendering it completely black.
When closing the dialog, the form closes but the background remains, leaving the view useless. I'm sure this is related to 1.
I'm using Angular 1.4.9 with angular-ui-bootstrap 0.13.4 [2015-09-03]. I've found a couple of posts showing incompatibilities between angular 1.4 and angular-ui-bootstrap but I've not managed to solve this.
Edit - view and controller code:
<button type="button" class="btn btn-sm btn-white" ng-click="procFileCtrl.viewErrors(file)"> <i class="fa fa-eye"></i> </button>
this.viewErrors = function(file) {
ModalService.showModal({
templateUrl: 'modules/components/client/modal/modal-base.html',
controller: 'FileController',
controllerAs: 'fileCtrl',
inputs: {
data: file
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
this.message = result ? 'ok' : 'notok';
});
}).catch(function(error) {
console.log(error);
});
};
modal-base.html
<div class="modal inmodal in" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<!-- header here -->
</div>
<div class="modal-body">
<!-- body here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
I am using Mobile Angular UI.
In parent window there is list of category names. I want selected category name should get updated from modal. I am able to display modal. I want to pass selected category item from parent view to modal.
My code in parent view
<div ng-controller="CategoryController as TitleCats">
<div ng-repeat="cats in TitleCats.categories">
<a href=""
ui-turn-on="titleCatUpdatemodal"
class="btn btn-default" ng-click="TitleCats.openUpdateModel(cats)"> {{cats.name}} --> Edit</a>
</div>
<div ui-content-for="modals">
<div ng-include="'pages/titleCatUpdatemodal.html'"></div>
</div>
</div>
My Modal is
<div class="modal" ui-if='titleCatUpdatemodal' ui-state='titleCatUpdatemodal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="titleCatUpdatemodal">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p><input type="text" ng-model="cats.name" >{{ cats.name }}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-default">Close</button>
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
When i click button it opens modal but no value!
Anyone please let me know how to get value in modal. Thanks in advance.
In your controller. you should have something similar to this:
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/myModal.html',
controller: 'myModalCtrl',
resolve: {
myData: function () {
//do stuff
return stuff;
}
}
});
Inside that resolve, you can fill out the function which should then be accessible in your modals controller
I have a bootstrap modal popup which I fill with data from my modalcontroller. After I filled it with data I would like to show it. To be able to show the modalpopup straight away when going into the page I would like to trigger it directly. Right now I have a button which does that, but how can I do it automatic in a proper way?
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" ng-init="getAllItems()">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="">
<form class="form-horizontal" name="form" role="form">
<div ng-repeat="item in items">
<input type="radio" name="fundselector" ng-model="item" ng-value="item"/> {{item}} <br />
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My controller:
angular.module("Modal")
.controller("ModalController",
[
"$scope", "$rootScope", "$location", "ModalService", "AuthenticationService",
function ($scope, $rootScope, $location, ModalService, AuthenticationService) {
AuthenticationService.GetCurrentWindowsUser(function(username) {
$scope.username = username;
});
$scope.getAllItems = function () {
AuthenticationService.GetCurrentWindowsUser(function (username) {
if (username) {
AuthenticationService.GetItems(username, function (items) {
$scope.items = items;
//Trigger modalpopup here
});
}
});
}
}
]);
Don't use jquery, use angular-ui.
https://angular-ui.github.io/bootstrap/#/modal
You can open the modal programmatically like below, and pass your data in in the resolve. This is copy and pasted straight from their example.
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
Find element by angular.element and hide.
var popup = angular.element("#modal-default");
//for hide model
popup.modal('hide');
//for show model
popup.modal('show');
Try something like this -
$('#yourModalId').modal('show');
To fix your example, I created a service that would open the modal and attached it to the outer controller and the modal controller. I had to remove the "modal" class from the modal because it had a display:none attribute on it. Here is a fiddle that shows what I did. However, #mgiesa's answer is better.
Iam able to open the modal when i click on get label
how to pass the scope variable 'item' from myCtrl to modal
code for myModal.html
//below is the modal to show when we click on button in main page and display the item value in the modal-body
//when we click on the save changes how to invoke the method
<div class="modal " tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title ng-binding" ng-bind-html="title">Title</h4>
</div>
<div class="modal-body">
{{item}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
<button type="button" class="btn btn-primary" ng-click="modalClose()">Save changes</button>
</div>
</div>
</div>
</div>
//code main html page
<div ng-app="test">
<div ng-controller="myCtrl">
<label ng-click="openModal()">GET</label>
</div>
</div>
****//code in js****
var app = angular.module('test', []);
app.controller('myCtrl',[ui.bootstrap], function($scope,$modal) {
$scope.item= "welcome....";
$scope.openModal= function(){
var myModal = $modal({ title: 'My Title', template: 'modalEx.html', show: true });
myModal.$promise.then(myModal.show);
}
});
You need to add a resolve and controller field in modal config. For example:
resolve: {
items: function () {
return $scope.items;
}
},
controller: 'ModalInstanceCtrl'
and in your modal controller:
controller('ModalInstanceCtrl', function ($scope, $modalInstance, items)
You have items on items varible.