-2

我正在开发一个抽搐应用程序。我知道使用 $http 可以轻松完成，但我决定使用 ngresource 进行尝试。我遇到的问题是离线选项卡。用户正在显示，但未显示徽标或用户名。我知道这是因为流承诺为离线用户返回 null，所以我无法检索徽标/用户名。无论如何，我可以以某种方式过滤我的 $scope.all 数组并将离线用户放在离线选项卡下吗？任何帮助将不胜感激！

http://codepen.io/labanch/pen/OXdKmK?editors=1011

  .controller('TwitchController', ['$scope','$q', 'TwitchAPIChannel', function($scope, $q, TwitchAPIChannel) {  

    var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];  
    //var offlineUsers = [];

    // Create promise for each channel/stream and store both in an empty object
    var channelPromises= users.reduce(function(map, user) {
        map[user] = TwitchAPIChannel.Channels.get({channel: user}).$promise;
        return map;
    }, Object.create(null));

    var streamPromises = users.reduce(function(map, user) {
        map[user] = TwitchAPIChannel.Streams.get({channel: user}).$promise;
        return map;
    }, Object.create(null));



    // Calling promises for each channel/stream
    $q.all(channelPromises).then(function(channels) {
        $scope.allUsers = [];
       //pushing all channels to the allUsers array
        angular.forEach(channels, function(channel) {   
          $scope.allUsers.push(channel);
        });
    });

    $q.all(streamPromises).then(function(streams) {
       $scope.onlineUsers = [];
       var offlineUsers = [];
       $scope.offlineUsers = [];
       angular.forEach(streams, function(stream) {
         if(stream.stream){
           $scope.onlineUsers.push(stream);
         } else {
           $scope.offlineUsers.push(stream);
         }
       });
    });

  //tabs
  this.tab = 1;
  this.setTab = function (tabId) {
      this.tab = tabId;
  };
  this.isSet = function (tabId) {
      return this.tab === tabId;
  };

  }])

 // Twitch API Factory using $resource
 .factory('TwitchAPIChannel', function TwitchAPIFactory($resource){
  return {
    Channels: $resource('https://api.twitch.tv/kraken/channels/:channel', {}, {
      get: {
          method: 'GET',
          headers: {
              Accept: 'application/vnd.twitchtv.v3+json',
              'Client-ID': 'haibznywychj91wl2j76x1v1mx1rgwf'
          }
      }
    }),
    Streams: $resource('https://api.twitch.tv/kraken/streams/:channel', {}, {
      get: {
          method: 'GET',
          headers: {
              Accept: 'application/vnd.twitchtv.v3+json',
              'Client-ID': 'haibznywychj91wl2j76x1v1mx1rgwf'
          }
      }
    })
  };
})
4

1 回答 1

1

您在离线选项卡上的 ng-click 错误。从这里改变它：

ng-click="tab = tab==2 ? a : 1"

对此：

ng-click="tab = tab==3 ? a : 3"

见这里：http ://codepen.io/anon/pen/KgLmjJ?editors=0001

于 2016-10-28T00:20:22.280 回答