如何显示和隐藏我的图像和视频部分，而不会在AngularJS NG-点击

Question

我正在网上课程项目。我有多个课程，从数据获取与唯一的ID。而我的课程编号具有图像或视频。当我点击我的课程ID，然后在它重定向到这个页面（打击代码）在此页面中我有两个部分一个是图像和第二是视频，但我想图像部分隐藏时，我的视频课程ID运行，同样另一个隐藏。请帮我。提前致谢！！！

//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---------*/

Answer 1

1. 需要声明boolean类型的一个变量，它会检查图片ID是否被点击或视频ID。例如。 $scope.isImageIdClicked = true;
2. 你需要改变变量的值，当你点击图片ID或视频ID。如果图像ID，然后点击设置变量（isImageIdClicked）为true，如果视频ID点击那么该变量设置为false。
3. 分配isImageIdClicked变量ng-show="isImageIdClicked"条件img标签和ng-show="!isImageIdClicked"到div您的video标签存在。