在视图中迭代 JSON答案

【问题标题】：Iterate over JSON in View在视图中迭代 JSON
【发布时间】：2015-05-01 21:57:34
【问题描述】：

我正在学习使用 MEAN 全栈，但遇到了一个我找不到解决方案的问题。

使用 ng-repeat 对 JSON 对象进行迭代可以正常工作，但使用第三列中的 x.url 变量根本不起作用。 URL 正确打印在第二列中。

如何在 iframe 中引用 x.url 变量？

谢谢。

<div class="jumbotron text-center">
    <table class='table table-bordered'>
        <caption>LIST OF ALL SONGS</caption>
        <thead>{{ tagline }}</thead>
        <tr ng-repeat="x in songs">
            <td>{{x.name}}</td> 
            <td>{{x.url}}</td>
            <td><iframe width="560" height="315" src={{x.url}} frameborder="0" allowfullscreen></iframe></td>
        </tr>
    </table> 
</div>

【问题讨论】：

我认为您只需将其包装在一个字符串中。 src="{{x.url}}"
你确定不是这样 --> src ="{{x.url}}"
你有一个plunker吗？
很遗憾没有。检查 Chrome 中的元素会出现以下错误“错误：[$interpolate:interr] errors.angularjs.org/1.3.14/$interpolate/…...ecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FBL-3QvC6bq4 at Error (native)”
用引号括起来这不是问题，问题是您甚至没有费心打开开发工具来查看问题所在，在这种情况下您无法插入不安全的内容，您有使用$sce 信任网址

标签： javascript json angularjs node.js express

【解决方案1】：

大多数绑定使用$sce 来清理元素并保护您免受潜在不安全内容的影响，如果您信任该 URL，您可以使用 $sce 来明确信任它

http://plnkr.co/edit/hJw5JWsteFBfiHH5d3QS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.tagline = "test"
  $scope.songs = [{url: $sce.trustAsResourceUrl('http://angularjs.org'), name: 'test'}];
});

如果您信任该内容，您也可以完全禁用$sce，但来自用户的任何内容都应视为不安全

【讨论】：