Question

我在YouTube上加载了很多视频，来自youtube。我想用占位符替换div，并且仅在用户单击占位符图像时请求视频。

我把这个部分用于在ng-click上加载视频的地方，但显然它会加载所有这些部分。如何只加载被点击的那个？

这里是我的html里面的ng-view和ng-repeat：

＆＃13;

  

  <figure class=" img-responsive">

        <iframe width="320" height="180" ng-src="{{item.VideoUrl | trusted }}" 
        frameborder="0" allowfullscreen="false" autoplay="0" ng-if="doplay">
        </iframe>
        
        <img ng-src="images/logos/videoplaceholder.jpeg" height="180" 
        class="img-responsive" ng-if="!doplay" ng-click="setPlay()" />

    </figure>

    <script>   
    $scope.setPlay = function (){
        $scope.doplay = true;
    }
    </script>

＆＃13;

就像我说的，上述工作，但一次加载所有视频。我需要加载被点击的那个。谢谢！

Answer 1

我没有看到您的ngRepeat，但最简单的方法是这样的：

<figure class="img-responsive" ng-repeat="item in items">
  <iframe width="320" height="180" ng-src="{{item.VideoUrl | trusted }}" frameborder="0" allowfullscreen="false" autoplay="0" ng-if="item.doplay"></iframe>
  <img ng-src="images/logos/videoplaceholder.jpeg" height="180" class="img-responsive" ng-if="!item.doplay" ng-click="item.doplay = true" />
</figure>

并跳过控制器方法。这只是在你的集合中的每个项目上设置一个属性。

Answer 2

您的doplay属性只包含一个值，因此每个视频的ng-if条件都相同。您可以在不事先将项目中添加doplay属性的情况下离开，因为如果它不存在则会出现错误。

所以你的代码会改为：

<img ng-src="images/logos/videoplaceholder.jpeg" height="180" class="img-responsive" ng-if="! item.doplay" ng-click="setPlay(item)" />

和

$scope.setPlay = function (item)
    {
        item.doplay = true;
    }

Angularjs - 在项目的ng-repeat内设置值ng-click

2 个答案: