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, Feb 05 '19 at 07: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, Feb 05 '19 at 07:40
make a function and call it on the click of video/image tab and inside this function simply change means set/unset a variable. let variable be isShowVideo and check the condition for this variable. when set show videos and when not show image — Adesh Kumar, Feb 05 '19 at 08:47
Sir, please check to blow answer. my videos is not displayed otherwise everything working properly — awwalfaeed, Feb 05 '19 at 09:21
that's the thing i am saying you have to change the value of variable on function call you have fixed the values — Adesh Kumar, Feb 05 '19 at 09:54
I have asked where you click to open the images or videos on div or somewhere else? — Adesh Kumar, Feb 05 '19 at 09:59

anr241193 · Answer 1 · 2019-02-05T07:24:35.223

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 05 '19 at 07:24

answered Feb 05 '19 at 07:09

anr241193

51
5

but, When I click on video Id then it not display because our videos already ng-show="!isImageIdClicked" then how it will show?? – awwalfaeed Feb 05 '19 at 09:12
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) – anr241193 Feb 05 '19 at 10:11
Sir, I'm beginner can you give me an example of how I will call a function. – awwalfaeed Feb 05 '19 at 10:24
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 Feb 05 '19 at 11:53
@MohammadFareed Did you try? – anr241193 Feb 06 '19 at 04:11
I'm really sorry, but I have already given the ng-click function dynamically for courses id. I want to without the ng-click show and hide my section. please show my edited question – awwalfaeed Feb 06 '19 at 04:48
Where is your click function which will change isImageIdClicked variable. Also, change ng-show="isVideoIdClicked" to ng-show="!isImageIdClicked" in Videos section and try. – anr241193 Feb 06 '19 at 05:08
this is my click function [ Start ]. from here I am got images and videos data from server – awwalfaeed Feb 06 '19 at 05:13
and this function redirects to here.. this is controller code $scope.getCourse =function(id){ window.localStorage.setItem('id',id); $window.location ="pptLesson.html"; }; – awwalfaeed Feb 06 '19 at 05:15
can you update your question by writing your controller logic? – anr241193 Feb 06 '19 at 05:33
Please use angular ui router for state management insted of changing url by window.location. It will be better if you can code in stackblitz and share link here so that we can resolve it quickly – anr241193 Feb 06 '19 at 05:50

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

1 Answers1