loading spinner while searching (#41)

* loading spinner while searching

* initialize $scope.loading =  false

* ng-src - > src
This commit is contained in:
Richcard Ho 2016-05-26 18:44:40 +10:00 committed by Listen 1
parent 29d7466e5a
commit 72e9cfdab2
3 changed files with 16 additions and 5 deletions

View File

@ -116,6 +116,11 @@ a {
margin-top: 12px;
}
.searchbox .nav .searchspinner{
margin-top: 8px;
height: 25px;
}
.searchitem {
height: 92px;

View File

@ -719,13 +719,16 @@
function($scope, $http, $timeout, angularPlayer, loWeb) {
$scope.tab = 0;
$scope.keywords = '';
$scope.loading = false;
$scope.changeTab = function(newTab){
$scope.loading = true;
$scope.tab = newTab;
$scope.result = [];
loWeb.get('/search?source=' + getSourceName($scope.tab) + '&keywords=' + $scope.keywords).success(function(data) {
// update the textarea
$scope.result = data.result;
$scope.result = data.result;
$scope.loading = false;
});
};
@ -741,10 +744,12 @@
// if searchStr is still the same..
// go ahead and retrieve the data
if (tmpStr === $scope.keywords)
{
{
$scope.loading = true;
loWeb.get('/search?source=' + getSourceName($scope.tab) + '&keywords=' + $scope.keywords).success(function(data) {
// update the textarea
$scope.result = data.result;
$scope.result = data.result;
$scope.loading = false;
});
}
});

View File

@ -188,13 +188,14 @@
<!-- Create a binding between the searchString model and the text field -->
<input type="text" class="form-control" ng-model="keywords" placeholder="输入歌曲名,歌手或专辑" ng-model-options="{debounce: 500}" />
<ul class="nav nav-tabs">
<li ng-class="{'active':isActiveTab(0)}" ng-click="changeTab(0)"><a>网易</a></li>
<li ng-class="{'active':isActiveTab(1)}" ng-click="changeTab(1)"><a href="#">虾米</a></li>
<li ng-class="{'active':isActiveTab(2)}" ng-click="changeTab(2)"><a href="#">QQ音乐</a></li>
<li ng-class="{'active':isActiveTab(3)}" ng-click="changeTab(3)" ng-show="isDoubanLogin"><a href="#">豆瓣</a></li>
<li ng-class="{'active':isActiveTab(3)}" ng-click="changeTab(3)" ng-show="isDoubanLogin"><a href="#">豆瓣</a></li>
<img class="searchspinner" id="spinner" src="images/loading.gif" ng-show="loading">
</ul>
<ul class="detail-songlist">
<li ng-repeat="song in result" ng-class-odd="'odd'" ng-class-even="'even'" ng-mouseenter="options=true" ng-mouseleave="options=false">
<div class="col2">