Question

我刚开始玩angularJS，所以也许我会问一些容易做的事，但我找不到办法去做。情况如下：我有一个列表，由一个ng-repeat填充来自一个范围控制器变量的值。通过jsonp调用在页面加载时加载此变量，这很好。当我需要根据另一个选择重新加载此列表时，问题就出现了。例如，如果在select中选择'day'值我需要显示一些值，当我选择'week'时我需要显示其他值（也通过ajax加载）。

我尝试过的是拥有一个加载数据并返回它的服务，并且在控制器中有两个方法，一个用于第一个加载，另一个用于第二个用于使用变量进行$ scope.apply的方法。然后我在选择值更改时调用第二个方法（我已经使用jquery完成它以简化它，直到我可以修复它）。

这是我的HTML

的一部分

<div x-ng-controller='LeaderboardCtrl'>
    <select id='leaderboard-select'>
        <option value='day'>day</option>
        <option value='week'>week</option>
        <option value='month'>month</option>
    </select>
    <div x-ng-repeat='p in leaderboard'>
        <p>{{p}}</p>
    </div>
</div>

这是影响此功能的代码的一部分

var lead = angular.module("lead",[]);

function LeaderboardCtrl($scope,$attrs,$http,jtlanService) {
    $scope.leaderboard = [];
    $scope.period = 'day';

    var data = {
        period:$scope.period
    };

    $scope.loadLeaderboard = function(){
        myService.loadLeaderboard(data).then(function(leaderboard) {
            $scope.leaderboard = [];
            $scope.leaderboard.push.apply($scope.leaderboard,leaderboard);
        });
    }

    $scope.reloadLeaderboard = function() {
        myService.loadLeaderboard(data).then(function(leaderboard) {
            $scope.$apply(function() {
                $scope.leaderboard = [];
                $scope.leaderboard.push.apply($scope.leaderboard,leaderboard);
            });
        });
    }

    $scope.loadLeaderboard()
}

lead.service("myService",["$http", function($http) {
    var myService = {
        loadLeaderboard : function(data) {
            var promise = $http.jsonp("/widget/leaderboardJSONP?callback=JSON_CALLBACK&_="+new Date(),{
                params:data,
                cache:false,
                ajaxOptions: { cache: false }
            }).then(function(response) {
                return response.data;
            });
            return promise;
        }
    };
    return myService;
}]);

$("#leaderboard-select").change(function(){
    scope.period = $("#leaderboard-select").val();
    scope.reloadLeaderboard();
});

以下是代码的小提琴：http://jsfiddle.net/WFGqN/3/

Answer 1

你的小提琴充满了问题：

您的加价中没有ng-app
您需要将第二个Framework Extensions下拉列表更改为“No wrap”选项之一
您的服务需要在控制器上方定义
您的控制器正在引用“jtlanService”，但您已定义“myService”
您的$http.jsonp调用不会按原样运行，但您可以使用echo服务（请参阅左侧的Ajax请求）来模拟请求
您不能也不应该使用jQuery事件来调用Angular控制器。您应该使用ng-change而不是$().change（即使您使用jQuery进行事件绑定，也应该使用$().on('change')）。
您不需要在$scope.$apply函数中使用loadLeaderboard，因为当您调用它时，您已经在$ apply通话中。
不需要2个加载+重新加载排行榜方法。
毕竟，你实际上并不需要jQuery。

这是一个解决问题的小提琴，我想你可以得到你想要的东西：http://jsfiddle.net/WFGqN/5/。你当然需要修改服务，但你明白了。

我建议阅读这个SO答案："Thinking in AngularJS" if I have a jQuery background?

使用angularjs重新加载列表

1 个答案: