What it does is that it takes the input of 'Github username' and uses that to display other values. It hits the API and catches the response in a variable called 'user'. What I want is that when I enter a non-existent username, it should show the 'table', 'error', and a few other parts of the UI. When I enter a valid username, it should hide those parts again.
Basically, I want to be able to toggle between ng-show and ng-hide. I know the solution is going to be something really simple but my brain has shut down and I have spent the last 3 hours trying different permutations and failed all.
Go on and solve.. Lest I am going to have nightmares about this, literally. This code is haunting me already.
Cheers!
<!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>
and Script
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);
}
});
I think $scope.user
should be set as a boolean not $scope.user=0
So when $scope.user === true
or ng-show = "user"
(or YES we found a user) we show the related element for when user exists.
when $scope.user === false
or ng-show= "!user"
in our HTML we display the element relevant to the user not existing.
If user
needs to remain an int for some reason, create a new variable to throw into the scope
based on the value of user
and use it to show/hide
.
https://scotch.io/tutorials/how-to-use-ngshow-and-nghide this is a pretty nifty guide on ways to use show/hide
As you've only two actions (AFAICS) then you won't run into any problems, things start getting way more complicated when you're trying to show/hide
3 or more things based on a couple of variables.
You code is confusing to read, especially your then
callbacks spread at random places. Maybe you could rewrite more like this :
var app = angular.module('myApp', ['controllers']);
// Here better use dependency injection using the inline Array Notation
angular.module('controllers', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
$scope.message = 'Search User';
$scope.search = function (username) {
$http.get('https://api.github.com/users/' + username)
.then(function (response) {
// I think response.data is null if user is not found so you can
// directly use $scope.user to check whether to display data
$scope.user = response.data;
// Return a promise here
return $http.get($scope.user.repos_url);
})
.then(function (response) {
$scope.repos = response.data;
$scope.repoSortSelector = '-stargazers_count';
})
.catch(function (err) {
$scope.error = err;
console.log(err);
});
}
}]);
I put some suggestions in comments.
Also, always use "
or '
, not both (I prefer the latter) and use triple equals ===
for equality.
Simply check for ng-show="user"
to show or hide parts or your UI.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.