返されたjsonを角度表示で表示する方法は？

Question

私はgithubリポジトリで検索を実装しています。 ここから取得した情報を表示する必要があります：https://api.github.com/search/repositories?q=bootstrap。例えばビューまたはHTMLに変換する。

<div ng-app="newsearchApp"> 
<div ng-controller="MainCtrl"> 
    <form action="#/about" method="get"> 
    <input ng-model="searchText" /> 
    <button ng-click="search()">Search</button> 
    </form> 
</div> 
</div> 

Githubリポジトリを検索するコード。

angular.module('newsearchApp') 
.controller("MainCtrl", ["$scope", function($scope) { 
$scope.searchText = ""; 
$scope.search = function() { 
    console.log($scope.searchText); 
    var item = $scope.searchText; 
// console.log(item) 
    var GithubSearcher = require('github-search-api'); 
    var github = new GithubSearcher({username: 'test@something.com', password: 'passwordHere'}); 
    var params = { 
    'term': $scope.searchText 
    }; 
    //i am not certain about the 'userData' 
    github.searchRepos(params, function(data) { 
    console.log(data); 
    $scope.userData = data; //i am not certain about the 'repoData' 
    }); 
    } }]); 

HTML

に

<div ng-repeat="repo in userData | filter:searchText | orderBy:predicate:reverse" class="list-group-item "> 
    <div class="row"> 
    <div class="col-md-8"> 
    <h4> 
    <small> 
    <span ng-if="repo.fork" class="octicon octicon-repo-forked"></span> 
    <span ng-if="!repo.fork" class="octicon octicon-repo"></span> 
    <small>{{repo.forks_count}}</small> 
    </small> 
    <a href="{{repo.html_url}}" target="_blank" > 
    {{repo.name}} 
    </a> 
    <small>{{repo.description}}</small> 
    <small>{{repo.stargazers_count}}</small> 
    <a href="{{repo.open_issues_count}}" target="_blank" > 
    Open Issues 
    </a> 
    <small>{{}}</small> 
    </h4> 
    </div> 
    </div> 
    </div> 

をJSONオブジェクトを移入する際の問題は、ここでの結果はHTMLにヌルですが、コンソールにはnullではありません。事前 で

おかげで結果がnullの

Answer 1

は問題は角度がGitHubのサーバが応答したとビューを更新しないことに気づいていないこと、です。ビューを再レンダリングするには、Angularに手動で指示する必要があります。 $scope.$apply()を呼び出してみてください。

github.searchRepos(params, function(data) { 
    console.log(data); 
    $scope.userData = data; 
    $scope.$apply(); 
}); 

はあなたがAngularsで$httpサービスをGitHubのAPIへのリクエストを行いたい場合、これは必要ではないだろう - 何かの非同期」でライブdoesntのどの起こる場合にのみ$scope.$apply()が必要になります角度のある世界 " - たとえば、setTimeout、jQuery ajaxコールなどがあります。だから、$timeoutと$httpのような角度ラッパーがあります。

詳細：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Answer 2

あなたは角度$ HTTPサービスを使用していないので、角度が変化を認識していません。

app.controller("myVm", function($scope,$http) { 
    var vm = $scope; 
    var url = "https://api.github.com/search/repositories?q=bootstrap" 
    $http.get(url).then(function onSuccess(response) { 
     vm.data = response.data; 
     console.log(vm.data); 
    }) 

}) 

HTML

<div ng-app="myApp" ng-controller="myVm"> 
    <div ng-repeat="item in data.items"> 
    {{item.full_name}} 
    </div> 
</div> 

DEMO on JSFiddle：あなたはAngularJSに$httpサービスを使用してアクセスすることができ、再レンダリングし

$scope.$apply(); 

Answer 3

のGitHubのAPIを使用して評価するため、手動で角度指示する必要があります