<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="myscript.js"></script>
<body>
<h1>YouTube Search</h1>
<div ng-controller="mainCtrl">
<form ng-submit="doSearch()" name="myForm">
<input type="text" ng-model="query" required>
<input type="submit" value="search" ng-disabled="myForm.$invalid">
</form>
<h2>Results</h2>
<ul ng-show="results.length" style="list-style:none;padding:0">
<li ng-repeat="result in results">
<img ng-src="{{result.media$group.media$thumbnail[0].url}}">
{{result.title.$t}}
</li>
</ul>
<p ng-hide="results.length">↑から検索してください。</p>
</div>
</body>
</html>
var mainCtrl = function($scope, $http){
$scope.doSearch = function(){
var url = 'https://gdata.youtube.com/feeds/api/videos?'
+ [
'q=' + encodeURIComponent($scope.query),
'alt=json',
'max-results=10',
'v=2',
'callback=JSON_CALLBACK'
].join('&');
$http.jsonp(url).success(function(data){
// console.dir(data);
$scope.results = data.feed.entry;
});
}
}
