角變化的對象不改變視圖

Question

截屏：http://screencast-o-matic.com/watch/cDjX00isoo
所有的JavaScript：http://fontget.com/js/all.js（底部）
演示的問題：http://www.fontget.com

所以我有這個問題我一直在處理一點，似乎無法弄清楚。我試圖給用戶通過點擊帶有特定過濾器的單選按鈕來排序數據庫結果的選項。

當我單擊單選按鈕時，我可以在控制檯中看到使用AJAX獲取了正確的url，但列表沒有在視圖中更新。

該頁面首次加載時無效（無排序過濾器）。

控制器：

FontGet.controller('mainController', ['$scope', 'FontService', '$location', '$rootScope', '$routeParams', function($scope, FontService, $location, $rootScope, $routeParams) { 
    $rootScope.hideFatMenu = false; 
    $scope.navCollapsed = true; 
    $scope.isSettingsCollapsed = true; 
    $rootScope.header = "Welcome to FontGet.com!"; 
    $scope.sortBy = 'new'; 

    $scope.fonts = { 
     total: 0, 
     per_page: 10, 
     current_page: ((typeof($routeParams.page) !== 'undefined') ? $routeParams.page : 1), 
     loading: true 
    }; 

    $scope.setPage = function() { 
     FontService.call('fonts', { page: $scope.fonts.current_page, sort: $scope.sortBy }).then(function(data) { 
      $scope.fonts = data.data; 
      $scope.fonts.loading = false; 

      document.body.scrollTop = document.documentElement.scrollTop = 0; 
     }); 
    }; 


    $scope.$watch("sortBy", function(value) { 
     $scope.setPage(); 
    }); 

    $scope.$watch("searchQuery", function(value) { 
     if (value) { 
      $location.path("/search/" + value); 
     } 
    }); 


    $scope.categories = FontService.categories(); 
    $scope.setPage(); 
}]); 

的觀點：

<div class="fontdd" ng-repeat="font in fonts.data" > 
    <!-- Stuff goes here. This is populated correctly when page initially loads --> 
</div> 

的排序按鈕：

<ul class="radiobtns"> 
    <li> 
     <div class="radio-btn"> 
      <input type="radio" value="value-1" id="rc1" name="rc1" ng-model="sorts" ng-change="sortBy = 'popular'"> 
      <label for="rc1" >Popularity</label> 
     </div> 
    </li> 
    <li> 
     <div class="radio-btn"> 
      <input type="radio" value="value-2" id="rc2" name="rc1" ng-model="sorts" ng-change="sortBy = 'trending'"> 
      <label for="rc2">Trending</label> 
     </div> 
    </li> 
    <li> 
     <div class="radio-btn"> 
      <input type="radio" value="value-4" id="rc4" name="rc1" checked="checked" ng-model="sorts" ng-change="sortBy = 'new'"> 
      <label for="rc4">Newest</label> 
     </div> 
    </li> 
    <li> 
     <div class="radio-btn"> 
      <input type="radio" value="value-3" id="rc3" name="rc1" ng-model="sorts" ng-change="sortBy = 'alphabetical'"> 
      <label for="rc3">Alphabetical</label> 
     </div> 
    </li> 
</ul> 

呦你會注意到單選按鈕的ng-model沒有設置爲sortBy。原因是，如果我將它設置爲sortBy，AJAX調用將進行4次（不知道爲什麼會發生這種情況）。

Answer 1

您正在使用$scope.$watch函數來監視sortBy範圍變量的更改。你應該嘗試取下手錶和更改排序按鈕ng-change事件給這個：

<div class="radio-btn"> 
     <input type="radio" value="value-1" id="rc1" name="rc1" ng-model="sorts" ng-change="Sort('popular')"> 
     <label for="rc1" >Popularity</label> 
    </div> 

在你的控制器中，創建一個Sort()功能：

$scope.Sort = function(sortBy) { 
    $scope.sortBy = sortBy; 
    $scope.setPage(); 
} 

你並不真的需要使用$watch當你可以調用一個函數並傳遞適當的信息。