Question

这是我第一次使用Angularjs使用下面的代码显示json中的内容，

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="GetVideosFiles">

<ul ng-repeat=" x in GetData ">
<li>example</li>
    <li><h1>{{ x.videos.Title }}</h1></li>
    <li>{{x.videos.Description}}</li><br><br>
    <li><button>{{x.videos.Url}}</button></li>
</ul>


</div>

<script type="text/javascript">


function GetVideosFiles($scope,$http){
    $http.get("VideoFile.json")
    .success(function(rsp){
        $scope.GetData = rsp;
        });
        }


</script>


</body>
</html>

VideoFile.json：

{ 
    "videos": [{ 
        "Title": "Windmill", 
        "Description": "What are wind mills? Are they giant fans? How do they work?", 
        "Url": "https://www.youtube.com/watch?v=Zrp0RC3XTpw" 
    }, { 
        "Title": "Race Car", 
        "Description": "Yeah, we know that your kid loves his cars", 
        "Url": "https://www.youtube.com/watch?v=zAteCGxrCSo" 
    }, { 
        "Title": "Blow Painting", 
        "Description": "The gentle wind has many an artist", 
        "Url": "https://www.youtube.com/watch?v=LKs3nw7YcR8" 
    }, , { 
        "Title": "Dreamcatcher", 
        "Description": "The wind turned naughty and blown the pieces of Dream catcher all over 
the hose", 
        "Url": "https://www.youtube.com/watch?v=UbgZuDAmAM" 
    }] 
}

但这段代码对我不起作用。

我想像这样显示我的页面：

enter image description here

有人能告诉我我做错了吗？

更新：

<div ng-app="app" ng-controller="GetVideosFiles">

<ul ng-repeat=" x in GetData.videos ">
<li>example</li>
    <li><h1>{{ x.Title }}</h1></li>
    <li>{{x.Description}}</li><br><br>
    <li><a ng-href="{{ x.Url }}">Watch video</a></li>  
</ul>


</div>

<script type="text/javascript">


var app=angular.module("app",[]);
app.controller("GetVideosFiles",GetVideosFiles);
function GetVideosFiles($scope,$http){
    $http.get("VideoFile.json")
    .success(function(rsp){
        //alert(rsp);
        $scope.GetData = rsp;
        });
        }

</script>

我已根据其中一个答案更新了我的代码，但它仍无效。

Answer 1

您的控制器声明不正确，并且您重复提示对象是错误的，并将您的json文件放在html的同一目录中。

试试这个

<div ng-app="app" ng-controller="GetVideosFiles">

<ul ng-repeat=" x in GetData.videos ">
<li>example</li>
    <li><h1>{{ x.Title }}</h1></li>
    <li>{{x.Description}}</li><br><br>
    <li><button>{{x.Url}}</button></li>
</ul>


</div>

<script type="text/javascript">

var app=angular.module("app",[]);
app.controller("GetVideosFiles",GetVideosFiles);
function GetVideosFiles($scope,$http){
    $scope.GetData=[];
    $http.get("VideoFile.json")
    .success(function(rsp){
        $scope.GetData = rsp;
        });
        }


</script>

Answer 2

你ng-repeat错了

<强>标记

<ul ng-repeat="x in GetData.videos">
    <li>example</li>
    <li><h1>{{ x.Title }}</h1></li>
    <li>{{x.Description}}</li><br><br>
    <li><button>{{x.Url}}</button></li>
</ul>

Demo Plunkr

Answer 3

我假设列表条目应该重复，而不是整个列表。因此尝试这样的事情：

<ul>
 <li ng-repeat=" x in GetData.videos "><p>example</p>
  <p><h1>{{ x.Title }}</h1></p>
  <p>{{x.Description}}</p><br><br>
<p><button>{{x.Url}}</button></p></li>
</ul>

另外，您应该直接申报家属，如下所示：

app.controller("GetVideoFiles", ["$scope", "$http", GetVideoFiles]);

请参阅：https://github.com/johnpapa/angular-styleguide#manual-annotating-for-dependency-injection。这将确保您的依赖关系正确。

Angularjs - json内容未显示

3 个答案: