firebase 获取每个子项的子项的数据
[英] firebase get data for every child item's child
本文介绍了firebase 获取每个子项的子项的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我是 firebase 的新手，我需要一些帮助.
首先，我正在做的是一个勾号表.例如，一个刻度表包含一个包含刻度日志的项目列表，所以我设计了我的数据如下:
票据:
票据:-JbN5ol2jGRtAOZ9ovrO(firebase 自动生成的 id)创建于:描述:姓名:所有者:-JbN5ol2jGRtAOZ9ovrO创建于:描述:姓名:所有者:
滴答声:
勾号:-JbOGA1s3Tl3jtKPQe43//票据ID-JbOHE6wY5CLz1wazNUx//itemID2014 年 11 月 27 日星期四 01:51:40 GMT 0800 (MYT)时间戳:-JbhDiX4iDneG34LzEgA//itemID2014 年 11 月 27 日星期四 01:51:44 GMT 0800 (MYT)时间戳:2014 年 11 月 27 日星期四 01:51:47 GMT 0800 (MYT)2014 年 11 月 27 日星期四 01:53:48 GMT 0800 (MYT)2014 年 11 月 27 日星期四 01:53:51 GMT 0800 (MYT)
查看:
<ion-content class="has-header" ng-repeat="ticksheetItems中的ticksheetItem"><div class="row" ng-repeat="ticksheetItems 中的ticksheetItem" ng-if="$index%2==0" ><div class="col col-50" ng-if="$index<ticksheetItems.length" ng-controller="TickCtrl" ng-click="incrementCount(ticksheetItem.$id,ticksheet.$id)"><div class="tick-item" style="background-color: #B7E5B0;"><div class="tick-item-row1 row"><i class="icon ion-gear-a font-size-l dark col col-10"></i> <strong class="font-size-m col dark">{{ticksheetItems[$index].name}}</strong>
<div class="row"><p class="col col-10" ng-controller="TickCtrl">{{count.test}}//我想把孩子的长度放在这里</p><p class="coldark">{{ticksheetItems[$index].description}}</p>
<div class="col col-50" ng-if="($index+1)<ticksheetItems.length"><div class="tick-item" style="background-color: #514D4F"><div class="tick-item-row1 row"><i class="icon ion-settings font-size-l dark col col-10"></i> <strong class="font-size-m col light">{{ticksheetItems[$index+1].name}}</strong>
<div class="row"><p class="col col-10">//我想把孩子的长度放在这里</p><p class="col item-note">{{ticksheetItems[$index+1].description}}</p>
</离子含量></ion-view>
在我看来我有我需要显示刻度总数的 ticksheetItems 的 ng-repeat所以我不知道我怎样才能在那个特定的ticketsheet下填充tick的总数
控制器:
//特定的ticketsheet ctrl.controller('TicksheetCtrl', function($scope, $rootScope,$firebase, $stateParams) {$scope.baseUrl = $rootScope.baseUrl+'ticksheets/'+ $rootScope.authData.uid + '/' + $stateParams.ticksheetId;var ref = new Firebase($scope.baseUrl)var ticksheet = $firebase(ref);var ticksheetItems = $firebase (ref.child('ticksheetItems'));$scope.ticksheet = ticksheet.$asObject();//父票据$scope.ticksheetItems = ticksheetItems.$asArray();//ticksheetItems}).controller('TickCtrl', function($scope, $rootScope,$firebase, $stateParams) {$scope.baseUrl = $rootScope.baseUrl + 'ticks/';$scope.incrementCount = function(itemId,ticksheetId){$rootScope.show('计数');var ref = new Firebase($scope.baseUrl + ticksheetId + '/' + itemId + '/' + new Date())//还没有使用服务器时间戳//将ticketsheet日志添加到'ticks'记录变量形式 = {时间戳:Firebase.ServerValue.TIMESTAMP，}ref.push(form,function(){$rootScope.hide();});var ticks = $firebase(ref.parent());var tickCount = $firebase(ref.parent()).$asArray();tickCount.$loaded().then(function(sync) {控制台日志(同步长度)；控制台日志(同步 [1])；console.log('item count' + itemId, $scope.count.itemId)$scope.count.test = (sync.length - 1);$rootScope.notify('此项的总数为:' + (sync.length -1) );});}//$scope.totalCount = 我不知道如何在我的视图中为每个票据项填充 {{count}}})
请指教.如果我广泛或不清楚地发布了问题，请发表评论，以便我知道要改进的地方.非常感谢！
解决方案
在您计算总数后，Angular 似乎没有更新您的视图.您应该考虑这篇文章该主题的强制性阅读.>
记住代码中事情(可能)发生的顺序:
- 您的控制器被调用
- 您的 TicksheetCtrl 控制器将 Firebase 承诺绑定到
$scope - 您的 TickCtrl 控制器为这些承诺之一添加了一个监听器
- 控制器功能完成
- Angular 使用
$scope 中的值更新视图
然后在以后的某个时间点:
- 数据来自 Firebase
- 这会调用您的
$loaded().then( 处理程序 - 您的处理程序计算一个值并将其添加到
$scope
请注意，在第 8 步之后，Angular 不知道更新视图.
解决方案很简单:
- 从您的处理程序中调用
$scope.$apply() 以告诉 Angular 将您的更改应用到视图
示例
我已经建立了一个最小的例子来说明这个问题:http://jsbin.com/wowoni/1/edit?html,js,output
视图:
<h2>静态项目(来自代码)</h2><ul><li ng-repeat='item in static'>{{item}}</li><h2>动态项目(来自 Firebase)</h2><ul><li ng-repeat='item in dynamic'>{{item}}</li>
如您所见，该视图包含两个列表.第一个列表将显示所谓的静态项目，第二个列表将显示来自 Firebase 的项目.
控制器:
app.controller('MainCtrl', function(FBURL, $scope) {$scope.static = [ 'static1', 'static2', 'static3' ];var ref = new Firebase(FBURL);ref.on('值'，函数(快照){$scope.dynamic = snapshot.val().items;$scope.$apply();});});
$scope.static 项将始终显示，因为它们位于 Angular 知道的函数中.$scope.dynamic 项在 Angular 不知道的时候添加到作用域中，所以我们需要告诉 Angular 使用 $scope.$apply() 应用我们的更改.如果删除该行，您会看到动态项目永远不会出现在渲染输出中.
AngularFire 负责为您应用来自 Firebase 的任何更改，这就是为什么您不必为使用 $scope.$apply()>$asObject() 或 $asArray().
Hi All I am super new to firebase and I need some help.
First of all what I'm doing is about a tick sheet. for example a tick sheet contains a list of items which contains logs of the ticks so I designed my data as follows:
Ticksheets:
ticksheets:
-JbN5ol2jGRtAOZ9ovrO(auto generated id by firebase)
created_on:
description:
name:
owner:
-JbN5ol2jGRtAOZ9ovrO
created_on:
description:
name:
owner:
Ticks:
ticks:
-JbOGA1s3Tl3jtKPQe43 //ticksheet ID
-JbOHE6wY5CLz1wazNUx //itemID
Thu Nov 27 2014 01:51:40 GMT 0800 (MYT)
timestamp:
-JbhDiX4iDneG34LzEgA // itemID
Thu Nov 27 2014 01:51:44 GMT 0800 (MYT)
timestamp:
Thu Nov 27 2014 01:51:47 GMT 0800 (MYT)
Thu Nov 27 2014 01:53:48 GMT 0800 (MYT)
Thu Nov 27 2014 01:53:51 GMT 0800 (MYT)
view:
<ion-view title="{{ticksheet.name}}" class="button-positive">
<ion-content class="has-header" ng-repeat="ticksheetItem in ticksheetItems">
<div class="row" ng-repeat="ticksheetItem in ticksheetItems" ng-if="$index%2==0" >
<div class="col col-50" ng-if="$index<ticksheetItems.length" ng-controller="TickCtrl" ng-click="incrementCount(ticksheetItem.$id,ticksheet.$id)">
<div class="tick-item" style="background-color: #B7E5B0;">
<div class="tick-item-row1 row">
<i class="icon ion-gear-a font-size-l dark col col-10"></i>
<strong class="font-size-m col dark">{{ticksheetItems[$index].name}}</strong>
</div>
<div class="row">
<p class="col col-10" ng-controller="TickCtrl">
{{count.test}} // I'd like to put the length of the child here
</p>
<p class="col dark">
{{ticksheetItems[$index].description}}
</p>
</div>
</div>
</div>
<div class="col col-50" ng-if="($index+1)<ticksheetItems.length">
<div class="tick-item" style="background-color: #514D4F">
<div class="tick-item-row1 row">
<i class="icon ion-settings font-size-l dark col col-10"></i>
<strong class="font-size-m col light">{{ticksheetItems[$index+1].name}}</strong>
</div>
<div class="row">
<p class="col col-10">
// I'd like to put the length of the child here
</p>
<p class="col item-note">
{{ticksheetItems[$index+1].description}}
</p>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
in my view I have
an ng-repeat for the ticksheetItems which I need to display total amount of ticks
so I don't know how can I populate the total count of ticks under that certail ticksheet
controller:
//specific ticksheet ctrl
.controller('TicksheetCtrl', function($scope, $rootScope,$firebase, $stateParams) {
$scope.baseUrl = $rootScope.baseUrl+'ticksheets/'+ $rootScope.authData.uid + '/' + $stateParams.ticksheetId;
var ref = new Firebase($scope.baseUrl)
var ticksheet = $firebase(ref);
var ticksheetItems = $firebase (ref.child('ticksheetItems'));
$scope.ticksheet = ticksheet.$asObject();// parent ticksheet
$scope.ticksheetItems = ticksheetItems.$asArray();//ticksheet Items
})
.controller('TickCtrl', function($scope, $rootScope,$firebase, $stateParams) {
$scope.baseUrl = $rootScope.baseUrl + 'ticks/';
$scope.incrementCount = function(itemId,ticksheetId){
$rootScope.show('counting up');
var ref = new Firebase($scope.baseUrl + ticksheetId + '/' + itemId + '/' + new Date()) //didn't use SERVER TIMESTAMP yet
// adding ticksheet log to 'ticks' record
var form = {
timestamp: Firebase.ServerValue.TIMESTAMP,
}
ref.push(form,function(){
$rootScope.hide();
});
var ticks = $firebase(ref.parent());
var tickCount = $firebase(ref.parent()).$asArray();
tickCount.$loaded().then(function(sync) {
console.log(sync.length);
console.log(sync[1]);
console.log('item count' + itemId, $scope.count.itemId)
$scope.count.test = (sync.length - 1);
$rootScope.notify('total count for this item is: ' + (sync.length -1) );
});
}
//$scope.totalCount = I don't know how to populate {{count}} on my view per ticksheet item
})
Please advise. If I have posted the question broadly or unclearly please comment so that I know what to improve. Thanks a lot!
解决方案
It looks like Angular doesn't update your view after you've calculated the total. You should consider this article mandatory reading for this topic.
Remember the order in which things (are likely to) happen in your code:
- your controller gets invoked
- your TicksheetCtrl controller binds Firebase promises to the
$scope
- you TickCtrl controller adds a listener to one of those promises
- the controller function completes
- Angular updates the views with the values in
$scope
And then at some later point:
- the data comes available from Firebase
- this invokes your
$loaded().then( handler
- your handler calculates a value and adds it to the
$scope
Note that after step 8, Angular doesn't know to update the views.
The solution is simple:
- call
$scope.$apply() from you handler to tell Angular to apply your changes to the view
Example
I've set up a minimal example to illustrate this problem: http://jsbin.com/wowoni/1/edit?html,js,output
The view:
<div ng-controller='MainCtrl'>
<h2>static items (from code)</h2>
<ul>
<li ng-repeat='item in static'>{{item}}</li>
</ul>
<h2>dynamic items (from Firebase)</h2>
<ul>
<li ng-repeat='item in dynamic'>{{item}}</li>
</ul>
</div>
As you can see, the view contains two lists. The first list will show so-called static items, the second list will show items from Firebase.
The controller:
app.controller('MainCtrl', function(FBURL, $scope) {
$scope.static = [ 'static1', 'static2', 'static3' ];
var ref = new Firebase(FBURL);
ref.on('value', function(snapshot) {
$scope.dynamic = snapshot.val().items;
$scope.$apply();
});
});
The $scope.static items will always show, since they're in a function that Angular knows about. The $scope.dynamic items are added to the scope at a time that Angular isn't aware of, so we need to tell Angular to apply our changes with $scope.$apply(). If you remove that line, you'll see that the dynamic items never show up in the rendered output.
AngularFire takes care of applying any changes that come down from Firebase for you, which is why you don't have to call $scope.$apply() for items that you get using $asObject() or $asArray().
这篇关于firebase 获取每个子项的子项的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
