Question

我在我的应用中的某个页面上列出了文章，其中我有一个iframe并叠加在该iframe上。我希望当用户点击iframe叠加层时，该文章的标题会被隐藏。不确定如何在ng-repeat中实现这一点。这个代码，截至目前，所有文章的点击事件标题都被隐藏。

<ion-item ng-repeat="article in articles" class="item-light">
    <div class="article">
        <a ng-show="article.external_media.length == 0 || article.external_media.url == ''"  href="#/main/article/{{article.id}}" nav-direction="forward" class="article-image-link">
            <img src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}">
            <h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
        </a>
        <div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
            <iframe ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>
            <div class="article-image-link">
                <h1 ng-hide="videoPlaying">{{ article.title.split(' ', 7).join(' ') }}</h1>
            </div>
            <div class="iframe-overlay" ng-click="playVideo()"></div>
        </div>
    </div>
</ion-item>

控制器：

$scope.playVideo = function(videoSrc) {
    $scope.videoPlaying = true;
    $scope.videoSrc = videoSrc + "&autoplay=1";
};

Answer 1

我已经创建了一个JSFIDDLE（基本版），可以帮助您了解自己想要做的事情。

查看

<div ng-app="app"> <div ng-controller="helloCnt"> <div ng-repeat='item in data'> <span ng-if="item.hide === undefined || !item.hide">{{item.name}}</span> <div ng-if="!item.hide" ng-click="playVideo(item)"> HIDE </div> <div ng-if="item.hide" ng-click="stopVideo(item)"> SHOW </div> <br/> </div> </div> </div>

<强> CONTROLLER

var app = angular.module('app', []) app.controller('helloCnt', function($scope) { $scope.data = [{ 'name': 'test' }, { 'name': 'in' }, { 'name': 'dummy' }, { 'name': 'data' }] $scope.playVideo = function(item, videoSrc) { // other code item.hide = true; }; $scope.stopVideo = function(item, videoSrc) { // other code item.hide = false; }; })

SEE JSFIDDLE

Answer 2

你也可以使用$ index来达到这个目的。

控制器

  app.controller('someController',function($scope){

   $scope.videoPlaying = [];

   $scope.playVideo = function(videoSrc,index) {

   $scope.videoPlaying[index] = true;
   $scope.videoSrc = videoSrc + "&autoplay=1";
};

   $scope.stopVideo = function(videoSrc,index) {

   $scope.videoPlaying[index] = false;
   $scope.videoSrc = videoSrc + "&autoplay=1";
};

})

HTML

我只更改两行，其余部分与

相同

 <h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>



   <div class="iframe-overlay" ng-click="playVideo($index)"></div>

Angular在点击时隐藏ng-repeat中的元素

2 个答案: