我一直在尝试获取角度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但都没有工作
答案 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为降序