On my home screen ,I seacrh some data by calling angular controller(SeacrhController),then I click on a button(Start) on home page,which open another tab.On clicking done button on second tab,that second tab is closed and parent page is refreshed.
I want to have data searched earlier on my parent page.Can anyone please tell,how I can achieve this.How can I maintain session.
I tried Cookies and localStorage ,but could not get things working.Any help pls.
common.js :
var myApp = angular.module('MyApp', []);
myApp.controller('SearchController', function($scope,$http) {
$scope.clientVO = {};
$scope.getClientDetail = function(bcidNo) {
var response=$http.get('/testWeb/rest/clientData/'+ id);
response.success(function(data) {
console.log("getActor data: " + angular.toJson(data, false));
$scope.clientVO = data;
})
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
}
});
home.html :
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="../javascripts/common/common.js"></script>
</head>
<!--some code -->
<div ng-controller="SearchController">
<form class="content-left-body">
<div class="client-details">
<span class="content-right-header">Client Details</span>
<table>
<tr><td>
<label>Client ID:</label></td>
<td><input type="text" name="id" id="Search"
placeholder="Search" ng-model="id" class="search-box"/>
<img alt="Search" src="../images/search_img.png" ng-click= "getClientDetail(id);" style="margin-left:-15% ; margin-top:2.5%">
</td>
<td>
<div ng-show="clientVO.clientName==''"><label style="color:red">ID not found in database.</label></div>
</td>
</table>
<div>
<div>
<table style="width: 100%">
<tr >
<td><label>Client Name:</label></td>
<td><span ng-show="!clientVO.clientName">-</span><label ng-bind="clientVO.clientName"></label></td>
<td><label>AccNo:</label></td>
<td><input type="text" ng-disabled="!clientVO.clientName"></td>
</tr>
<tr >
<td><label>Contact Name:</label></td>
<td><span ng-show="!clientVO.contactName">-</span><label ng-bind="clientVO.contactName"></label></td>
<td><label>Validation Level:</label></td>
<td>
<select ng-disabled="!clientVO.clientName">
<option value="">-Please Select-</option>
<option value="">Level 1</option>
<option value="">Level 2</option>
<option value="">Level 3</option>
<option value="">Level 4</option>
</select>
</td>
</tr>
</table>
</div>
<div class="Data-details">
<div class="data">
<div class="content-left-body">
<span class="content-left-header">Data details</span>
<span class="content-left-header-small">Data classification</span>
<label id="clientClassification" ></label> <br><br>
<button id="btn-yellow" onClick=window.open("classification.html","fullscreen=yes");>Start</button>
</div>
</div>
</div>
</form>
<!---some code -->
</html>
I have this simple service to store data in localStorage (note that localStorage won't work here in SO)
angular.module('app', [])
.controller('AppCtrl', ['StorageSrv', function(StorageSrv){
StorageSrv.set('user', {first: 'John', last: 'Doe'})
console.log(StorageSrv.get('user'));
}]);
// This service can live in a separate file
angular.module('app')
.service('StorageSrv', ['$rootScope', function ($rootScope) {
var self = this,
prefix = 'your_prefix',
ls = window.localStorage;
self.set = function(key, val){
var obj = {};
_.set(obj, key, val);
ls.setItem(prefix, JSON.stringify(obj));
};
self.get = function(keyPath){
if (!keyPath || !_.size(keyPath))
return JSON.parse(ls.getItem(prefix));
else
return _.get(JSON.parse(ls.getItem(prefix)), keyPath, null);
};
self.delete = function(keyPath){
var key = prefix + '_'+_.trimStart(key, prefix);
var current = self.get(key);
_.unset(current, keyPath);
if (!_.size(current)){
self.update(key, {})
}
else {
self.update(key, current);
}
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl"></div>
Related
hello i have a problem with angular im benninger to this framework but i have some knowledge about it . Yesterday i faced a problem when i wanted to change controller from a global function(in this case all is OK) to controller by module i recive blank page here is my code
angular.module('myApp', ['ngRoute', 'membersService']).config(
['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: MembersCtrl
}).otherwise({
redirectTo: '/home'
});
}]);
var myApp = angular.module('myApp');
myApp.controller('MembersCtrl',['$scope','$http', 'MembersSrv',function ($scope, $http, MembersSrv) {
$scope.refresh = function () {
return MembersSrv.getAllPersons().then(function (data) {
$scope.persons = data.data;
});
};
$scope.clearMessages = function () {
$scope.successMessages = '';
$scope.errorMessages = '';
$scope.errors = {};
};
$scope.reset = function () {
if ($scope.regForm) {
$scope.regForm.$setPristine();
}
$scope.newPerson = {name: "", lname: "", phoneNumber: ""};
$scope.clearMessages();
};
$scope.register = function () {
$scope.clearMessages();
MembersSrv.save($scope.newPerson, function (data) {
$scope.refresh();
$scope.reset();
$scope.successMessages = ['Member Registered'];
}, function (result) {
if ((result.status == 409) || (result.status == 400)) {
$scope.errors = result.data;
} else {
$scope.errorMessages = ['Unknown server error'];
}
});
};
$scope.refresh();
$scope.reset();
$scope.orderBy = 'name';
}]);
angular.module('membersService', []).service('MembersSrv', [
'$http', function ($http) {
this.getAllPersons = function () {
var url = "http://localhost:8080/gadziksy-web/rest/person";
var req = {
method: 'GET',
url: url,
};
return $http(req);
}
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>myApp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Disable phone number detection on iOS. -->
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="css/screen.css" type="text/css"/>
<!-- Load angularjs -->
<script src="js/libs/angular.js"></script>
<!-- Load angularjs-route, which allows us to use multiple views displayed through application routes -->
<script src="js/libs/angular-route.js"></script>
<!-- Load angularjs-resource, which allows us to interact with REST resources as high level services -->
<script src="js/libs/angular-resource.js"></script>
<!-- Load the controllers for our app -->
<script src="js/controllers/MemberCtrl.js"></script>
<!-- Load the application wide JS, such as route definitions -->
<script src="js/app.js"></script>
<!-- Load the services we have defined for the application, particularly the REST services -->
<script src="js/services/MemberSrv.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<div ng-controller="MembersCtrl">
<h1 align="center">International Bank Application</h1>
<div>
<p>You have successfully connected to the Application.</p>
</div>
<form name="regForm" ng-submit="register()">
<h2>Member Registration</h2>
<fieldset>
<legend>Register a member:</legend>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" ng-model="newPerson.name" placeholder="Your Name" required
autofocus/>
</div>
<div>
<label for="lname">Lname:</label>
<input type="text" name="lname" id="lname" ng-model="newPerson.lname" placeholder="Your Lastname"
required/>
</div>
<div>
<label for="dob">Date</label>
<input type="date" name="dob" id="dob" ng-model="newPerson.dob" placeholder="Your Date" required/>
</div>
<ul ng-hide="!successMessages" class="success">
<li ng-repeat="message in successMessages">{{message}}</li>
</ul>
<ul ng-hide="!errorMessages" class="error">
<li ng-repeat="message in errorMessages">{{message}}</li>
</ul>
<div>
<input type="submit" ng-disabled="regForm.$invalid" id="register" value="Register"/>
<input type="button" ng-click="reset()" name="cancel"
id="cancel" value="Cancel"/>
</div>
</fieldset>
</form>
<h2>Persons</h2>
<em ng-show="persons.length == 0">No registered members.</em>
<table ng-hide="persons.length == 0" class="simpletablestyle">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Lname</th>
<th>Date</th>
<th>REST URL</th>
</tr>
</thead>
<tr ng-repeat="person in persons | orderBy:orderBy">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.lname}}</td>
<td>{{person.dob}}</td>
<td>details-{{person.id}}
</td>
</table>
<div>
REST URL for all members: /rest/members
</div>
<div>
<input type="button" ng-click="refresh()" name="refresh"
id="refresh" value="Refresh"/>
</div>
</div>
Change controller: MembersCtrl to controller: 'MembersCtrl' in $routeProvider config
I've built a basic Angular app that successfully displays the results of an HTTP GET request.
I'd like to include fallback code that displays two static HTML elements in place of the remote content if the GET request fails.
I can just call a vanilla JS function to do DOM manipulation, but I'd like to do this the Angular way. I've read a lot of documentation and articles, but I'm not seeing a straightforward way to do this. Code below.
I'd like to replace the call to updateUIError() with Angular code that performs the same task.
Here's a Plunk: https://plnkr.co/edit/PDwSUCXGNW2cwAIwl9Z9?p=streamer
HTML:
<div class="scene fullheight" id="attractions" ng-app="listApp">
<article class="content">
<h1>Upcoming Events</h1>
<div class="main" ng-controller="ListController as eventsList">
<div class="search">
<label>search: </label>
<input ng-model="query" placeholder="Search for events" autofocus>
<label class="formgroup">by:
<select ng-model="eventOrder" ng-init="eventOrder='start.local'">
<option value="start.local">Date</option>
<option value="name.text">Name</option>
</select>
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" checked>
ascending
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" value="reverse">
descending
</label>
</div>
<ul class="eventlist">
<li class="event cf" ng-repeat="item in eventsList.events | filter: query | orderBy: eventOrder:direction">
<div class="info">
<h2>{{item.name.text}}</h2>
<p>{{item.start.local | date:"dd MMMM ', ' h:mma"}}</p>
</div>
</li>
</ul>
</div>
</article>
</div>
Angular:
angular.module('listApp', [])
.controller('ListController', ['$scope', '$http', function($scope,$http) {
var eventsList = $scope.eventsList;
$http.get(URI)
.success(function(data) {
console.log(data);
eventsList.events = data.events;
}).error(function() {
updateUIError();
});
}]);
function updateUIError() {
var events = document.querySelector('#attractions article');
events.innerHTML = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
}
You need to create a static error and show it when the error occurs using ngIf
<div class="scene fullheight" id="attractions" ng-app="listApp">
<div ng-controller="ListController">
<article class="content" ng-if="hasUIError">
<h1>Local Attractions</h1>
<p>There's lots to do nearby.</p>
</article>
<article class="content" ng-if="!hasUIError">
<h1>Upcoming Events</h1>
<!-- REST OF THE HTML -->
</article>
</div>
</div>
Then, in your controller, you need to set the flag to false by default:
$scope.hasUIError = false;
And when there's an error in the ajax, set it to true
$http.get(URI).then(
function(response) {
console.log(response);
$scope.events = response.data.events;
},
function() {
$scope.hasUIError = true;
}
);
Before solving your issue, there is another issue to address. Specifically, since you are using the ControllerAs approach, you'll want to attach your variables to 'this' rather than $scope.
Then you create a variable called showError that will get evaluated in showing the message. Then you can use the ng-show directive to hide/show the message.
angular.module('listApp', [])
.controller('ListController', ['$http',
function($http) {
var vm = this;
vm.events = [];
vm.showError = false;
$http.get(URI)
.success(function(data) {
vm.events = data.events;
}).error(function() {
vm.showError = true;
});
}
]);
<!DOCTYPE html>
<html ng-app="listApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ListController as eventsList">
<div class="scene fullheight" id="attractions">
<div ng-show="eventsList.showError">
<h1>Local Attractions</h1>
<p>There's lots to do nearby.</p>
</div>
<article class="content">
<h1>Upcoming Events</h1>
<div class="main">
<div class="search">
<label>search:</label>
<input ng-model="query" placeholder="Search for events" autofocus>
<label class="formgroup">by:
<select ng-model="eventOrder" ng-init="eventOrder='start.local'">
<option value="start.local">Date</option>
<option value="name.text">Name</option>
</select>
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" checked>ascending
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" value="reverse">descending
</label>
</div>
<ul class="eventlist">
<li class="event cf" ng-repeat="item in eventsList.events | filter: query | orderBy: eventOrder:direction">
<div class="info">
<h2>{{item.name.text}}</h2>
<p>{{item.start.local | date:"dd MMMM ', ' h:mma"}}</p>
</div>
</li>
</ul>
</div>
</article>
</div>
</body>
</html>
Do something like this:
angular.module('listApp', [])
.controller('ListController', ['$scope', '$http', function($scope,$http) {
var eventsList = $scope.eventsList;
$http.get(URI)
.success(function(data) {
console.log(data);
eventsList.events = data.events;
}).error(function() {
eventsList.errorMessage = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
});
}]);
In the HTML, add a span inside the scope of ListController that will have ngModel="errorMessage". You can add additional property to show / hide the error span and main content div.
I am trying to use ng-hide to display the action of "Edit" button. For this, I am using a boolean "edit" in this way: "ng-model="edit" ng-value="true", but it has no effect and I can't figure it out why.
Here is my code:
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset="UTF-8">
<script src="../../../bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="categories/module/category-module.js"></script>
<script src="categories/controller/category-controller.js"></script>
<script src="categories/service/category-service.js"></script>
<title>Categories</title>
</head>
<body><div lang="en" ng-app="myCategories">
<div ng-controller="categoryController">
<div class="w3-container" ng-init='getCategories()'>
<h3>Categories</h3>
<table class="w3-table w3-bordered w3-striped">
<tr>
<th>Edit</th>
<th>Name</th>
<th>Description</th>
</tr>
<tr ng-repeat="category in categories">
<td>
<button class="w3-btn w3-ripple" ng-click="editCategory(category.id) " ng-model="edit" ng-value="true">✎ Edit</button>
</td>
<td>{{category.name }}</td>
<td>{{ category.description }}</td>
</tr>
</table>
<form ng-hide="edit">
<h3 ng-hide="edit">Edit Category:</h3>
<label> Name:</label>
<input class="w3-input w3-border" type="text" ng-model="name" ng-disabled="!edit" placeholder="{{category.name}}">
<br>
<label>Description:</label>
<input class="w3-input w3-border" type="text" ng-model="description" ng-disabled="!edit" placeholder="{{category.description}}">
<br>
<label>New Description:</label>
<input class="w3-input w3-border" type="text" ng-model="newDescription" placeholder="New Description">
<br>
<button class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">✔ Save Changes</button>
</form>
</div>
</div>
</div>
</body>
</html>
//app.js
(function() {
var myComments = angular.module('myComments', [ 'comment' ]);
var myCategories = angular.module('myCategories', [ 'category' ]);
var myTopics = angular.module('myTopics', [ 'topic' ]);
})();
//category-controller
(function() {
'use strict';
angular.module('category').controller('categoryController',
topicControllerFunction);
topicControllerFunction.$inject = [ '$scope', 'categoryService' ];
function topicControllerFunction($scope, categoryService) {
$scope.getCategories = getCategories;
function getCategories() {
console.log();
$scope.categories=[];
var promise=categoryService.getCategories();
promise.then(function(data){
if(data!=undefined && data!=null){
$scope.categories=data;
} else{
$scope.categories=undefined;
}
},function(error){
console.log('error='+error);
$scope.categories=undefined;
})
categoryService.getCategories();
$scope.categories = categoryService.getCategories();
}
}
}())
Make sure edit is set to true in the case where you want to hide the desired section.
Inside editCategory() looks like a a good place for this to happen, instead of ng-value=true
Set $scope.edit = true; in editCategory()
Do something like:
<span ng-show = "edit == true">
I'm not sure if it can be done the way you're attempting (I've never used that technique, but here's how I'd do it:
<button ng-click="edit=!edit" ... ></button>
If you need edit to be true on load, you could either set it in your controller (best), or use ng-init:
<button ng-click="edit=!edit" ng-init="edit=true" ... ></button>
Also, you should have a dot in your ng-model value: If you are not using a .(dot) in your AngularJS models you are doing it wrong?
I have selectboxit component in my site. With next design:
And I need when I select first select box value render data to first column if select value from second select box render data to second column etc.
My html code:
<table>
<tr>
<td>
<div id="appVerFirst">
<select id="appVersionsFirst" ng-model="version" ng-change="compareVersionEvent(version, 1)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::fisrtScoreClass}} total-quality"> {{::fisrtScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::fisrtUsers}}</p> </div>
</td>
<td>
<div id="appVerSecond">
<select id="appVersionsSecond" ng-model="version1" ng-change="compareVersionEvent(version1, 2)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last-1">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::secondScoreClass}} total-quality"> {{::secondScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::secondUsers}}</p> </div>
</td>
<td>
<div id="appVerThird">
<select id="appVersionsThird" ng-model="version2" ng-change="compareVersionEvent(version2, 3)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last-2">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::thierdScoreClass}} total-quality"> {{::thierdScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::thierdUsers}}</p> </div>
</td>
</tr>
</table>
And event for change selectBox component:
var selectData = function (version) {
var currentData = null;
angular.forEach($scope.compareAppVer, function (data) {
if (data.version === version)
currentData = data;
});
return currentData;
};
$scope.compareVersionEvent = function (version, id) {
var data = selectData(version);
switch (id) {
case 1:
{
$scope.fisrtScore = data.qualityScore;
$scope.fisrtScoreClass = data.qualityScoreClass;
$scope.fisrtUsers = data.activeUsers;
break;
}
case 2:
{
$scope.secondScore = data.qualityScore;
$scope.secondScoreClass = data.qualityScoreClass;
$scope.secondUsers = data.activeUsers;
break;
}
default:
{
$scope.thierdScore = data.qualityScore;
$scope.thierdScoreClass = data.qualityScoreClass;
$scope.thierdUsers = data.activeUsers;
}
}
};
But it is not working, because in compareVersionEvent not transfer correct data,
means what if in second selectBox I select value 1
then in first selectBox I select value 1
he don't transfer to main compareVersionEvent.
Help me please fix this issue.
Try initialize version, version1 and version2 in JavaScript
and remove "::" in html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>SelectBoxIt demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
</head>
<body>
<select name="test">
<option value="SelectBoxIt is:">SelectBoxIt is:</option>
<option value="a jQuery Plugin">a jQuery Plugin</option>
<option value="a Select Box Replacement">a Select Box Replacement</option>
<option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
var selectBox = $("select").selectBoxIt();
});
</script>
</body>
</html>
please visit this link http://gregfranko.com/jquery.selectBoxIt.js/
I'm trying to hide an portion of HTML that I've included in my index.html. What happens right now is when I search for a user a table, along with contents, gets rendered on the page. The behavior that I want is when "Clear" is pressed that included HTML table, along with its contents, is removed. Right now the table will only show if the $scope.user has a value and that check is done with ng-if. When I click the "Clear" button I set $scope.user to "false" which I thought would remove the include. I've also tried adding it to the table DOM element but that doesn't work either. What am I not getting? I'm sure it's a fairly simple fix for someone who knows more about Angular.
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{ message }}</h1>
<div>{{ error }}</div>
<form name="searchUser" ng-submit="search(username)">
<input type="search" required placeholder="Username..." ng-model="username" />
<input type="submit" value="Search" />
<button ng-click="clearSearch()">Clear</button>
</form>
<div ng-include="'userDetails.html'" ng-if="user"></div>
</body>
</html>
script.js
(function() {
var app = angular.module("githubViewer", []);
var MainController = function($scope, $http) {
var onUserComplete = function(response) {
$scope.user = response.data;
$http.get($scope.user.repos_url)
.then(onRepos, onError);
};
var onRepos = function(response) {
$scope.repos = response.data;
}
var onError = function(reason) {
$scope.error = "Could not fetch the data";
}
$scope.search = function(username) {
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
}
$scope.clearSearch = function() {
return ($scope.user = false);
}
$scope.message = "Github Viewer";
$scope.repoSortOrder = "+name";
};
app.controller("MainController", ["$scope", "$http", MainController])
}());
userDetail.html
<div>
<h2>{{ user.name }}</h2>
<img ng-src="http://www.gravatar.com/avatar/{{ user.gravatar_id }}" />
<h2>User Repositories</h2>
Order By:
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
</select>
<table>
<thead>
<tr>
<th>Repository Name</th>
<th>Stars</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | orderBy:repoSortOrder">
<td>{{ repo.name }}
</td>
<td>{{ repo.stargazers_count | number }}</td>
<td>{{ repo.language }}</td>
</tr>
</tbody>
</table>
</div>
I ended up figuring it out. The problem was that the
<button ng-click="clearSearch()">Clear</button>
was in the <form> so when I clicked the "Clear" button the Search function was being executed again. I noticed this via the Chrome console since I had XHR requests turned on...when I clicked "Clear" another GET was being executed.
I moved the button outside of the <form> and the functionality works as expected.
clearSearch() should be setting the value of $scope.user instead of returning a value:
$scope.clearSearch = function() {
$scope.user = false;
}