使用 angularjs 重新加载列表

Question

我刚开始玩 angularJS，所以也许我在问一些容易做的事情，但我找不到方法。 情况如下：我有一个由 ng-repeat 填充的列表，该列表从作用域控制器变量中获取值。这个变量是通过 jsonp 调用在页面加载时加载的，这很好用。 当我需要根据另一个选择重新加载此列表时，问题就来了。例如，如果在选择中选择“天”值，我需要显示一些值，而当我选择“周”时，我需要显示其他值（也通过 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

你的小提琴充满了问题：

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

这是一个可以解决问题的小提琴，我认为可以满足您的需求：http://jsfiddle.net/WFGqN/5/。您当然需要自行修复服务，但您明白了。

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