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，则会进行4次AJAX调用（不知道为什么会发生这种情况）。

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。

范围内的角度更改对象不会更改视图

1 个答案: