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