I want to show list of videos in Bootstrap modal. and when user clicks on any video from the list that video should play in modal only. similarly I want to show albums in modal and on click of specific album I want to show slideshow in the same modal, for this I am using angular js and Codeigniter with bootstrap. Please help me.
Not a very descriptive question, but I recommend you check out Angular UI's Bootstrap directives.
I use their modal directive a lot and being able to specify a template and controller for a modal is priceless when it comes to working with things like you're describing.
Update to address your comment:
I have no idea where $scope.hall_videos is coming from, but you need to use the resolve property to return the correct videos. For instance, if $scope.hall_videos was an object where the key was the id and the value was an array of videos like so:
$scope.hall_videos = {
'1': ['video1', 'video2'],
...
'7': ['video14', 'video15']
};
You could populate with the correct videos like this:
$scope.open = function (size, id) {
var modalInstance = $modal.open({
templateUrl: 'video_gallery.html',
controller: 'HomeCtrl',
size: size,
resolve: {
hall_videos: function () {
var videos = [];
angular.forEach($scope.hall_videos, function(video) {
if (video.hall_info_id === id) {
videos.push(video);
}
});
return videos;
}
}
});
};
Related
I'm working on Project MVC, Angular js
I have a problem that I show modal and in initiate fun i load a number of questions on the basis of user choose his subject and then opening the pop up modal with questions
But I do not know the modal open but without any questionds
at first i Load skill page and from this page user select his subject and then popup modal opened
after search i think the problem because of modal loaded when skill page load so after open modal no questions appeared
how can i reload modal or solve this problem
Hint : when pass function in init with values it worked and questions appeares but when pas values values passes aright and beduge is correct but popup open as empity
For example
ng-init =" ReadQuizQuestions (11, true)"
working good but when
ReadQuizQuestions (secItem.Id, secItem.hasQuiz) not working
can any one help me to solve this problem
in skill page
<div class="badge_unit heading_font video_course_preview" ng-
click="ReadQuizQuestions(secItem.Id,secItem.hasQuiz)"></div>
in angular js file
$scope.ReadQuizQuestions = function (id,hasQuiz) {
if (hasQuiz == true) {
ShowPleaseWait();
QuizService.ReadQuiz(QuizId).success(function (res) {
.
.
.
.......
$('#QuizModal').modal('show');
});
HidePleaseWait();
}
}
Thanks in advance
In this exemple i passed parameters from my controller to the modal (list of questions)
To pass the parameter you need to use resolve and inject the items in controller of modal.
$modal.open({
emplateUrl: 'myModal.html',
controller: 'ModalDialogController',
resolve: {
questionsList: function () {
return $scope.questionsList;
}
}
})
.result.then(function(result) {
alert(result);
});
After selecting your question and validate i reyrn the selected value to my controller with
$scope.ok = function () {
$modalInstance.close($scope.modal.selectedName);
};
This is a full exemple
Since I am a beginner using AngularJS the $scope approach to pass data between different controllers and (in my case) a modal drives me crazy. Due to that reason, I googled around the web and found an interesting blogpost about passing data to a UI-bootstrap modal without using $scope.
I had a deeper look at this blogpost and the delivered plunk which works pretty nice and started to adopt this to my own needs.
What I want to achieve is to open a modal delivering an text input in which the user is able to change the description of a given product. Since this would provide more than a minimal working example I just broke everything down to a relatively small code snippet available in this plunk.
Passing data from the main controller into the modal seems to work as the default product description is displayed in the modal text input as desired. However, passing the data back from the modal to the main controller displaying the data in index.html does not seem to work, since the old description is shown there after it was edited in the modal.
To summarize my two questions are:
What am I doing wrong in oder to achieve a 'two-way-binding' from the main controller into the modal's text input and the whole way back since the same approach works in the mentioned blogpost (well, as the approach shown in the blogpost works there must be something wrong with my code, but I cannot find the mistakes)
How can I implement a proper Accept button in order to accept the changed description only if this button is clicked and discard any changes in any other case (clicking on Cancel button or closing the modal by clicking next to it)?
In your main controller, create two resolver functions: getDescription and setDescription.
In your modal controller, use them.
Your modal HTML
<div class="modal-header">
<h3 class="modal-title">Test Text Input in Modal</h3>
</div>
<div class="modal-body">
Product description:
<input type="text" ng-model="modal.description">
</div>
<div class="modal-footer">
<button ng-click="modal.acceptModal()">Accept</button>
<button ng-click="modal.$close()">Cancel</button>
</div>
Your main controller
function MainCtrl($modal) {
var self = this;
self.description = "Default product description";
self.DescriptionModal = function() {
$modal.open({
templateUrl: 'modal.html',
controller: ['$modalInstance',
'getDescription',
'setDescription',
ModalCtrl
],
controllerAs: 'modal',
resolve: {
getDescription: function() {
return function() { return self.description; };
},
setDescription: function() {
return function(value) { self.description = value; };
}
}
});
};
};
Your modal controller
function ModalCtrl($modalInstance, getDescription, setDescription) {
var self = this;
this.description = getDescription();
this.acceptModal = function() {
setDescription(self.description);
$modalInstance.close();
};
}
Is there a good tutorial on how to create a menu in angularjs, the menu should only appear on few pages, for example:
localhost/web (is the page which shows all my projects)
because I don't have any project selected I don't get a sidemenu
localhost/web/1 (is the main page of a project)
because I've selected project 1 I can see a sidemenu.
My links in the sidemenu will have the projectID
Project Settings(url) -> localhost/web/1/settings
web.settings({projectID: projectID})
And many others, the sidemenu will show in all that pages where a project id is selected.
Keep your menu data in JSON like
// here key in json object is your current url.
$scope.menus = {
"syllabus":[{name:"Chapters",url:"",class:"fa fa-folder-open"},{name:"Q&A",url:"url",class:"fa fa-folder-open"},{name:"syllabus 3",url:"url 1",class:"fa fa-folder-open"}],
};
$scope.sub_menus = [];
$scope.setSubMenu =function(menu){
$scope.sub_menus = $scope.menus[menu];
}
Call setSubMenu function whenever you change the route. pass your current route as an argument that will set the current page menu data in to sub_menus array. angular will render this automatically for you.
app.directive('subMenu', ['$compile', function($compile) {
return {
restrict: 'EA',
template: '<div ng-if="sub_menus.length" class="subtabs"> <ul class="nav"><li ng-repeat = "sb in sub_menus"><i class=\"{{sb.class}}\""></i> {{sb.name}}</li>' +
'</ul></div>',
compile: function() {
return {
post: function($scope) {
}
}
}
}
}]);
I have a ion-view that shows a list of items in a modal. I want to dismiss the modal once I select an item. I have associated the modal template with a controller using an ng-controller attribute.
How do I dismiss the modal form inside the controller where I will be getting click events ?
try like this
$scope.modal.hide();
If you are using multiple modals, give different names to scope variables..
$ionicModal.
fromTemplateUrl('example.html', {
scope: $scope,
animation: 'slide-in-up' }).
then(function(modal) {
$scope.exmapleModal = modal;
$scope.exmapleModal.show();
$scope.closeExample = function() {
$scope.exmapleModal.hide();
$scope.exmapleModal.remove();
};
});
Close the modal the same name as
$scope.closeExample();
I'm trying to make a directive angularJS directive for Twitter Bootstrap Modal.
var demoApp = angular.module('demoApp', []);
demoApp.controller('DialogDemoCtrl', function AutocompleteDemoCtrl($scope) {
$scope.Langs = [
{Id:"1", Name:"ActionScript"},
{Id:"2", Name:"AppleScript"},
{Id:"3", Name:"Asp"},
{Id:"4", Name:"BASIC"},
{Id:"5", Name:"C"},
{Id:"6", Name:"C++"}
];
$scope.confirm = function (id) {
console.log(id);
var item = $scope.Langs.filter(function (item) { return item.Id == id })[0];
var index = $scope.Langs.indexOf(item);
$scope.Langs.splice(index, 1);
};
});
demoApp.directive('modal', function ($compile, $timeout) {
var modalTemplate = angular.element("<div id='{{modalId}}' class='modal' style='display:none' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'><div class='modal-header'><h3 id='myModalLabel'>{{modalHeaderText}}</h3></div><div class='modal-body'><p>{{modalBodyText}}</p></div><div class='modal-footer'><a class='{{cancelButtonClass}}' data-dismiss='modal' aria-hidden='true'>{{cancelButtonText}}</a><a ng-click='handler()' class='{{confirmButtonClas}}'>{{confirmButtonText}}</a></div></div>");
var linkTemplate = "<a href='#{{modalId}}' id= role='button' data-toggle='modal' class='btn small_link_button'>{{linkTitle}}</a>"
var linker = function (scope, element, attrs) {
scope.confirmButtonText = attrs.confirmButtonText;
scope.cancelButtonText = attrs.cancelButtonText;
scope.modalHeaderText = attrs.modalHeaderText;
scope.modalBodyText = attrs.modalBodyText;
scope.confirmButtonClass = attrs.confirmButtonClass;
scope.cancelButtonClass = attrs.cancelButtonClass;
scope.modalId = attrs.modalId;
scope.linkTitle = attrs.linkTitle;
$compile(element.contents())(scope);
var newTemplate = $compile(modalTemplate)(scope);
$(newTemplate).appendTo('body');
$("#" + scope.modalId).modal({
backdrop: false,
show: false
});
}
var controller = function ($scope) {
$scope.handler = function () {
$timeout(function () {
$("#"+ $scope.modalId).modal('hide');
$scope.confirm();
});
}
}
return {
restrict: "E",
rep1ace: true,
link: linker,
controller: controller,
template: linkTemplate
scope: {
confirm: '&'
}
};
});
Here is JsFiddle example http://jsfiddle.net/okolobaxa/unyh4/15/
But handler() function runs as many times as directives on page. Why? What is the right way?
I've found that just using twitter bootstrap modals the way the twitter bootstrap docs say to is enough to get them working.
I am using a modal to house a user edit form on my admin page. The button I use to launch it has an ng-click attribute that passes the user ID to a function of that scope, which in turn passes that off to a service. The contents of the modal is tied to its own controller that listens for changes from the service and updates values to display on the form.
So.. the ng-click attribute is actually only passing data off, the modal is still triggered with the data-toggle and href tags. As for the content of the modal itself, that's a partial. So, I have multiple buttons on the page that all trigger the single instance of the modal that's in the markup, and depending on the button clicked, the values on the form in that modal are different.
I'll take a look at my code and see if I can pull any of it out to build a plnkr demo.
EDIT:
I've thrown together a quick plunker demo illustrating essentially what I'm using in my app: http://embed.plnkr.co/iqVl0Wb57rmKymza7AlI/preview
Bonus, it's got some tests to ensure two password fields match (or highlights them as errored), and disables the submit button if the passwords don't match, or for new users username and password fields are empty. Of course, save doesn't do anything, since it's just a demo.
Enjoy.
There is a working native implementation in AngularStrap for Bootstrap3 that leverages ngAnimate from AngularJS v1.2+
Demo : http://mgcrea.github.io/angular-strap/##modals
You may also want to checkout:
Source : https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js
Plunkr : http://plnkr.co/edit/vFslNmBAoKPVXtdmBXgv?p=preview
Well, unless you want to reinvent this, otherwise I think there is already a solution.
Check out this from AngularUI. It runs without twitter bootstrap.
I know it might be late but i started trying to figure out why the handler got called several times as an exercise and I couldn't stop until done :P
The reason was simply that each div you created for each modal had no unique id, once I fixed that everything started working. Don't ask me as to what the exact reason for this is though, probably has something to do with the $('#' + scope.modalId).modal() call.
Just though I should post my finding if someone else is trying to figure this out :)