それが行うことは、「Github ユーザー名」の入力を受け取り、それを使用して他の値を表示することです。API にヒットし、「user」という変数で応答をキャッチします。私が望むのは、存在しないユーザー名を入力すると、「テーブル」、「エラー」、および UI の他のいくつかの部分が表示されることです。有効なユーザー名を入力すると、それらの部分が再び非表示になります。
基本的に、ng-show と ng-hide を切り替えられるようにしたいと考えています。解決策が非常に単純なものになることはわかっていますが、私の脳はシャットダウンしており、過去3時間かけてさまざまな順列を試し、すべて失敗しました.
続けて解決してください..文字通り、これについて悪夢を見ることはありません。このコードはすでに私を悩ませています。
乾杯！
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1><div>
<h1 ng-show="user">{{ message }}</h1>
</div></h1>
<div ng-show="username">
User handle: {{ username }}</div><br/>
<div ng-show="user">{{ error }}</div>
<form name="searchUser">
<input type = "search" placeholder = "username to find" ng-model="username">
<input type="submit" value = "Search" ng-click="search(username)">
Order: <select ng-model="repoSortSelector" ng-show="user">
<option value="+name">Name</option>
<option value="-stargazers_count">Star</option>
<option value="+language">Language</option>
</select>
</form>
<h2>{{ user.login }}</h2>
<img ng-src="{{ user.avatar_url }}" title="{{ user.login }}">
<table ng-show="user">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
<th>Stars</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | orderBy: repoSortSelector">
<td>{{ repo.name }}</td>
<td>{{ repo.stargazers_count | number }}</td>
<td>{{ repo.language }}</td>
</tr>
</tbody>
</table>
</body>
</html>
とスクリプト
var app = angular.module('myApp', ['controllers']);
angular.module('controllers', []).controller('MainController', function($scope, $http) {
$scope.message = "Search User"
var onComplete = function(response) {
$scope.user = response.data;
if(user.message=="Not Found"){
$scope.user=0;
}
$http.get($scope.user.repos_url)
.then(onRepos, onReposError)
};
var onRepos = function(response) {
$scope.repos = response.data;
console.log($scope.repos);
$scope.repoSortSelector = "-stargazers_count";
}
var onReposError = function(reason) {
console.log(reason);
}
var onError = function(reason) {
$scope.error = "Could not find the result. Please try something else! "
}
// $scope.message = "Hello, Angular!"
$scope.search = function(username) {
$http.get("https://api.github.com/users/" + username)
.then(onComplete, onError);
}
});