Angular没有订购数据

时间:2015-04-04 05:08:10

标签: javascript angularjs firebase

我一直在尝试获取角度js来为我订购数据。但唉,它不起作用

我从firebase(https://boiling-inferno-4886.firebaseio.com/champion)检索数据并使用节点js将其发送到控制器。

控制器代码

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {


// Pulls list of games
$scope.pullGame = function() {
  console.log("Here");
  $http.get('/getGameData').success(function(response) {
    console.log(response);
    $scope.championlist = response;
  });

};  
}]);

然后使用ng-repeat

显示信息
<!DOCTYPE>
<html ng-app="myApp">
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<title>DevCha</title>

</head>
<body>
<div class="container"  ng-controller="AppCtrl">

<input class="form-control" ng-model="game.name">
<button class="btn btn-info" ng-click="pullGame()">Update</button>

<h1>DevCha</h1>

<table class="table">
    <thead >
    <tr>
        <th>Champion Name</th>
        <th>Wins</th>
        <th>Losses</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="champion in championlist|orderBy: 'name'">
        <td>{{champion.name}}</td>
        <td>{{champion.wins}}</td>
        <td>{{champion.losses}}</td>
    </tr>
    </tbody>
</table>
</div>


<script src="controllers/controller.js"></script>

</body>
</html>

我曾尝试使用firebase对数据进行排序,但这两种方法都无法正常工作(这是个奇怪的)。但我很高兴,如果其中任何一个将为我排序(角或火基)

节点Js将数据推送到角度

的代码
app.get('/getGameData', function(req, res){

    var ref = new Firebase("https://boiling-inferno-4886.firebaseio.com/champion");

    ref.once("value", function(snapshot) {
      // Success
      console.log(JSON.stringify(snapshot.val()));
      res.json(snapshot.val());

    }, function (errorObject) {
      console.log("The read failed: " + errorObject.code);
      //callback("Failure", null);
    });

});

Sample_Data - 1:{name:'Jim',Wins:10,Lossses:5},2:{name:'Fred',Win:8,Lossses:5} (实际数据可以在firebase链接中找到)

tl:dr我需要订购我的数据,我尝试使用firebase的内置方法对它进行排序和角度| orderBy但都没有工作

1 个答案:

答案 0 :(得分:0)

我们确实需要查看这些数据,但是之前我遇到过这个问题,这是我的答案。

正如您在documentation中看到的那样,orderBy只订购数组。 (key,value)语法适用于对象。也许在数组中转换你的字典就行了。

如果没有,您可以编写一个过滤器来为您完成。看看这个过滤器:

app.filter('orderObjectBy', function () {
  return function (items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function (item) {
        filtered.push(item);
    });
    filtered.sort(function (a, b) {
        return (a[field] > b[field] ? 1 : -1);
    });
    if (reverse) filtered.reverse();
    return filtered;
  };
});

然后你可以像这样使用它:

<div class="item" ng-repeat="item in items | orderObjectBy:'position'">

</div>

顺便说一下,你可以改变这样的顺序:

<ul>
  <li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }</li>
</ul>

false为升序,true为降序