CODEWITHSUNDEEP
angularjscodeignitertwitter-bootstrap
Sudarshan Kalebere
Sudarshan Kalebere

Reputation: 3937

Bootstrap modal to play videos and image slider with angular js

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.

Upvotes: 1

Views: 1947

Answers (1)

Joe
Joe

Reputation: 2596

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;
      }
    }
  });
};

Upvotes: 2

Related Questions