How to Show and Hide My Image and Video Section Without ng-click in AngularJS

Question

I am working online courses project. I have multiple courses fetch from data with the unique id. And My courses Id have images or video. When I clicked on my courses Id then it redirects to this page(blow code) in this page I have two section one is for images and second is for video but I want to image section hide when my video course Id run and similarly another hide. Please help me. Thanks in Advance!!!

//pptLesson.html
    <!-- Images Section -->
    <section ng-show="isImageIdClicked">
        <div class="container" >
            <div class="row" ng-init="image()">
                <div class="col-md-12" ng-repeat="img in images">
                    <div class="mySlides">
                        <!-- <div class="numbertext">{{img.id}}</div> -->
                        <img class="size-i" src="{{img.oe_images}}" ng-show="isActive($index)" type="image" style="width:100%;">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a class="prev" ng-click="showPrev()" style="font-size:36px;">❮</a>
                        <a class="next" ng-click="showNext()" style="font-size:36px;">❯</a>
                        <div class="row paddi">
                            <div class="column" ng-repeat="img in images">
                                <div>
                                    <img class="demo cursor border-demo" ng-src="{{img.oe_images}}" type="image" ng-show="isActive($index)"
                                         style="width:100%; display: block !important;" data="{{img.id}}"
                                        ng-click="currentSlide(img.id)" alt="{{img.oe_images}}" type="image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>    

    <!-- Video Section -->
    <section ng-show="isVideoIdClicked">
        <div class="container" id="myCarousel" >
            <div class="row" ng-init="image()">
                <div class="col-md-12">
                    <div class="mySlides" ng-repeat="img in images">
                        <!-- <div class="numbertext">{{img.id}}</div> -->
                        <div>
                            <video width="100%" id="video" controls="controls" ng-show="isActive($index)">
                                <source ng-src="./assets/vdo/{{img.oe_images}}" type="video" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <a ng-click="showPrev()" class="carousel left" href="#myCarousel" style="font-size:36px;float:left;padding: 50px 0px;">❮</a>
                        <a ng-click="showNext()" class="carousel right" href="#myCarousel" style="font-size:36px;float:right;padding: 50px 0px;">❯</a>
                        <div class="row paddi">
                            <div class="column" ng-repeat="img in images">
                                <div>
                                    <video controls="controls" ng-src="./assets/vdo/{{img.oe_images}}"
                                        type="video/mp4" ng-show="isActive($index)" style="width:100%"></video>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--./Video Section -->
Controller

    /*-----Redirect to perticular course start by id---------*/
         $scope.getCourse  =function(id){
            window.localStorage.setItem('id',id);
            $window.location ="pptLesson.html";
        };
         /*-----./Redirect to perticular course start by id---------*/

         /*-----PPT Images/Videos---------*/
         $scope.image = function(){
            var id=window.localStorage.getItem('id');
            $http.get(baseURL+'pptImagesById/'+id).then(successCallback, errorCallback);

            function successCallback(response){
                console.log(response.data);
                $scope.images=response.data;
                window.localStorage.setItem('img_l',$scope.images.length);
                console.log($scope.images.length);
            }
            function errorCallback(error){
                console.log(error);
            }   
         };
         /*-----./PPT Images/videos---------*/

I have video and images courses list dynamically and some courses included PPT images and some courses included videos. and in one page i have defined my code for videos and images as shown in above. now i want to when I click on video id course then i want to display only video and hide other images... — awwalfaeed
– awwalfaeed, Commented Feb 5, 2019 at 7:24
please see my edited question. I have tried ng-if condition this is not working and also I am trying ng-show condition then it displays only images but when I click on video Id then it not display videos. — awwalfaeed
– awwalfaeed, Commented Feb 5, 2019 at 7:40

anr241193 · Accepted Answer · 2019-02-05 07:24:35Z

1

You need to declare one variable of type boolean which will check whether image id was clicked or video id. Eg. $scope.isImageIdClicked = true;
You need to alter variable value when you click on image id or video id. If image id is clicked then set that variable(isImageIdClicked) to true and if video id is clicked then set that variable to false.
Assign isImageIdClicked variable to ng-show="isImageIdClicked" condition in img tag and ng-show="!isImageIdClicked" to div where your video tag is present.

edited Feb 5, 2019 at 7:24

answered Feb 5, 2019 at 7:09

anr241193

515 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

awwalfaeed Over a year ago

but, When I click on video Id then it not display because our videos already ng-show="!isImageIdClicked" then how it will show??

anr241193 Over a year ago

You should call function on click of image/video id to toggle your variable value as I had mentioned in my answer (Refer 2nd point)

awwalfaeed Over a year ago

Sir, I'm beginner can you give me an example of how I will call a function.

anr241193 Over a year ago

Write one function in your controller which will change value of "isImageIdClicked". Whenever you are clicking on image id, call that function using ng-click="your_function()" OR Whenever you are clicking on image id, write ng-click="isImageIdClicked=true;" and Whenever you are clicking on video id, write ng-click="isImageIdClicked=false;" (Note: This is not a good practice. Variable toggling should be done in controller)

anr241193 Over a year ago

@MohammadFareed Did you try?

|

Collectives™ on Stack Overflow

How to Show and Hide My Image and Video Section Without ng-click in AngularJS

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related