Обновить список с 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 оберткой» Опции
3. Ваша служба должна быть определена выше контроллера
4. Ваш контроллер ссылки «jtlanService», но вы определили «MYSERVICE»
5. Ваш $http.jsonp вызов не будет работать, как есть, но вы можете использовать можно использовать эхо-службы (см Ajax запросов на левой стороне), чтобы эмулировать запросы
6. Вы не можете и не должны использовать события jQuery для вызова угловых контроллеров. Вы должны использовать ng-change, а не $().change (и даже если вы использовали jQuery для привязки событий, вы должны использовать $().on('change')).
7. Вам не нужно было использовать $scope.$apply в вашей функции loadLeaderboard, поскольку, когда вы его вызываете, вы уже вошли в вызов $ apply.
8. Нет необходимости в методах 2 загрузки + перезагрузки.
9. И после всего этого вам действительно не нужен jQuery.

Вот скрипка, которая исправляет ситуацию, и я думаю, что вы получите то, что хотите: http://jsfiddle.net/WFGqN/5/. Разумеется, вам нужно будет исправить эту услугу, но вы получите эту идею.

Я рекомендую прочитать этот SO ответ: "Thinking in AngularJS" if I have a jQuery background?