用angularjs重新加载一个列表

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

你的小提琴是充满了问题：

1. 有没有在您的加价没有ng-app
2. 你需要第二个框架扩展下拉菜单更改为“无包装”的一个选项
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/。你当然需要修复你的服务，但你明白了。

我建议你阅读这太回答：如果你想使用jQuery（底部），您需要包括jQuery的"Thinking in AngularJS" if I have a jQuery background?