Angularjs

Question

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

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

这是我在 ng-view 和 ng-repeat 中的 html：

  

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

正如我所说，上面的方法有效，但一次加载了所有视频。我只需要加载被点击的那个。谢谢！！

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>

并跳过控制器方法。这只是在 collection.

中的 each 项目上设置了一个属性

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 - 设置重复项内的点击值

Angularjs - set value ng-click inside ng-repeat on an item

angularjs-scope

angularjs-ng-repeat

angularjs-ng-click