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

【问题标题】：Angularjs - set value ng-click inside ng-repeat on an itemAngularjs - 在项目上的 ng-repeat 内设置值 ng-click
【发布时间】：2015-09-26 04:07:52
【问题描述】：

我在页面上加载了很多来自 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>

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

【问题讨论】：

标签： angularjs angularjs-scope angularjs-ng-repeat angularjs-ng-click

【解决方案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>

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

【讨论】：

【解决方案2】：

您的 doplay 属性仅包含一个值，因此每个视频的 ng-if 条件都相同。您可能无需提前将 doplay 属性添加到 item 就可以逃脱，因为如果它不存在，它将是错误的。

因此您的代码将更改为：

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

【讨论】：