如何使用ng-repeat指令从JSON提取trailer链接嵌入页面iframe？

没问题，我来帮你搞定这个AngularJS嵌入视频的需求！下面分步骤给你讲清楚怎么实现：

1. 先明确你的JSON数据结构 #

首先假设你的JSON数据大概是这样的（你可以对应自己的实际结构调整）：

// 示例JSON数据，假设已经绑定到AngularJS的$scope上
$scope.movies = [
  {
    title: "示例电影1",
    trailer: "6bFvb3WKISk"
  },
  {
    title: "示例电影2",
    trailer: "其他视频ID"
  }
];

2. 过滤出目标视频数据 #

你有两种方式获取到trailer字段值为"6bFvb3WKISk"的条目：

方式一：在控制器中提前过滤 #

如果想在逻辑层先处理好数据，可以在控制器里写过滤逻辑：

// 从movies数组中筛选出trailer为目标ID的条目
$scope.targetTrailer = $scope.movies.filter(function(movie) {
  return movie.trailer === "6bFvb3WKISk";
});

方式二：在视图中直接过滤 #

也可以直接在ng-repeat指令里添加过滤条件，省去控制器的处理步骤：

3. 用ng-repeat嵌入iframe视频 #

不管用哪种过滤方式，最终都可以通过ng-repeat渲染出对应的iframe：

对应方式一（提前过滤的数据） #

<!-- 使用控制器中过滤好的targetTrailer数组 -->
<div ng-repeat="movie in targetTrailer">
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/{{movie.trailer}}" 
    frameborder="0" 
    allowfullscreen
  ></iframe>
</div>

对应方式二（视图内直接过滤） #

<!-- 在ng-repeat中直接添加过滤条件 -->
<div ng-repeat="movie in movies | filter: {trailer: '6bFvb3WKISk'}">
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/{{movie.trailer}}" 
    frameborder="0" 
    allowfullscreen
  ></iframe>
</div>

额外注意事项 #

• 要是你的JSON数据是异步获取的（比如从后端API请求），记得要等数据加载完成后再渲染，避免出现movie.trailer为空的情况。可以加个ng-if做判断：

<div ng-repeat="movie in targetTrailer" ng-if="movie.trailer">
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/{{movie.trailer}}" 
    frameborder="0" 
    allowfullscreen
  ></iframe>
</div>

• 确保你的AngularJS应用已经正确初始化，控制器和视图的作用域绑定正常哦～

内容的提问来源于stack exchange，提问作者tanuj Kumar