与firebase自动生成的id的角度列表详细视图 [英] Angular list detail view with firebase autogenerated id
问题描述
我试图从firebase加载一些名称到我的列表视图，然后当我点击任何一个项目，它显示在下一个视图名称使用自动生成的ID内的firebase相应的名称。这是我的代码：
controllers.js：
$ $ p $ angular.module （'starter.controllers'，[]）
.controller（'ListCtrl'，function（$ scope，UserService）{
var listAllUsers = function（）{$ b $ UserService。 listAll（）。then（function（users）{
$ scope.list = users;
}）;
}
listAllUsers（）;
}）
$ b .controller（'DetailCtrl'，function（$ scope，$ stateParams，UserService）{
UserService.listById（$ stateParams.listId）.then（function用户）{
$ scope.user = user;
}）;
console.log（$ stateParams.listId）;
}）;
services.js：
angular.module（'starter.services'，[]）
$ b $ .factory（'UserService'，function（$ q，$ firebaseArray）{
var ref = new Firebase（'https://list-detail-001.firebaseIO.com/users'）
var Users = $ firebaseArray（ref）;
返回{
listAll：function（）{
var deferred = $ q.defer（）;
deferred.resolve（Users）;
return deferred.promise;
}，
listById：function（userId）{
var deferred = $ q.defer（）;
var user = Users [userId];
deferred。 resolve（user）;
return deferred.promise;
}
};
}）;
list.html：
< ion-view view-title =Lists>
< ion-content>
< ion-list>
< ion-item ng-repeat =listitem in listhref =＃/ {{listitem。$ id}}>
{{listitem.title}}
< / ion-item>
< / ion-list>
< / ion-content>
< / ion-view>
detail.html：
< ion-view view-title =Details>
< ion-content>
< h1> {{user.title}}< / h1>
< / ion-content>
< / ion-view>
正如您所看到的，该应用程序非常简单。数据的作品，如果它在一个简单的JSON数组，但我似乎无法得到的详细信息页面只显示user.title属性。我可能错过了一些非常简单的事情。任何人都可以请帮忙？我猜我的代码中的问题必须与我的services.js中的listById（）函数或我的controller.js中的我的DetailCtrl。但我不知道是什么我从$ stateParams.listId参数的数据库中获取正确的ID，但从那里，我的$ scope.users是未定义的。请帮忙！
好的，我解决了这个问题。现在一切正常。我想保持承诺，因为我有点偏执，我不希望我的数据很大的情况下，我的用户界面受到影响。
controllers.js：
.controller（'ListCtrl'，函数（$ scope，UserService）{
var listAllUsers = function（）{
UserService.listAll（）。then（function（users）{
$ scope.list = users;
）};
}
listAllUsers（）;
}）
$ b $ .controller（'DetailCtrl'，function（$ scope，$ stateParams， UserService）{
UserService.listById（$ stateParams.listId）.then（function（user）{
$ scope.user = user;
}）;
}）;
services.js
（$ UserName，$ firebaseArray，$ firebaseObject）{
var ref = new Firebase（'https://list-detail-001.firebaseIO.com/users'）
var Users = $ firebaseArray（ref）;
return {
listAll：function（）{
var deferred = $ q.defer（）;
deferred.resolve（Users）;
return deferred.promise;
$ b $ listById：function（key）{
var deferred = $ q.defer（）;
var userRef = ref.child（key）;
var user = $ firebaseObject（userRef）;
deferred.resolve（user）;
return deferred.promise;
}
};
}）;
I'm trying to load some names from a firebase to my list view and then when I click on any of the items it shows the name on the next view using the autogenerated id inside firebase for the respective name. Here's my code:
controllers.js:
angular.module('starter.controllers', [])
.controller('ListCtrl', function($scope, UserService) {
var listAllUsers=function(){
UserService.listAll().then(function(users){
$scope.list=users;
});
}
listAllUsers();
})
.controller('DetailCtrl', function($scope, $stateParams, UserService) {
UserService.listById($stateParams.listId).then(function(user){
$scope.user=user;
});
console.log($stateParams.listId);
});
services.js:
angular.module('starter.services', [])
.factory('UserService', function($q, $firebaseArray) {
var ref = new Firebase('https://list-detail-001.firebaseIO.com/users')
var Users=$firebaseArray(ref);
return {
listAll:function(){
var deferred=$q.defer();
deferred.resolve(Users);
return deferred.promise;
},
listById:function(userId){
var deferred=$q.defer();
var user=Users[userId];
deferred.resolve(user);
return deferred.promise;
}
};
});
list.html:
<ion-view view-title="Lists">
<ion-content>
<ion-list>
<ion-item ng-repeat="listitem in list" href="#/{{listitem.$id}}">
{{listitem.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
detail.html:
<ion-view view-title="Details">
<ion-content>
<h1>{{user.title}}</h1>
</ion-content>
</ion-view>
As you can see, the app is fairly simple. The data works if its in a simple json array, but I cannot seem to get the details page to just display the user.title property. I'm probably missing something really simple. Can anyone please help? I'm guessing the issue in my code has to do with either the listById() function in my services.js or my DetailCtrl in my controller.js. But I don't know what. I'm getting the correct ID from my database in the $stateParams.listId parameter but from there on, my $scope.users is undefined. Please help!
Ok I fixed the issue. Now everything works. I wanted to keep the promises because I'm a bit paranoid and I don't want a situation where my data is large, and my UI suffers becasue of it.
controllers.js:
.controller('ListCtrl', function($scope, UserService) {
var listAllUsers=function(){
UserService.listAll().then(function(users){
$scope.list=users;
});
}
listAllUsers();
})
.controller('DetailCtrl', function($scope, $stateParams, UserService) {
UserService.listById($stateParams.listId).then(function(user){
$scope.user=user;
});
});
services.js
angular.module('starter.services', [])
.factory('UserService', function($q, $firebaseArray,$firebaseObject) {
var ref = new Firebase('https://list-detail-001.firebaseIO.com/users')
var Users=$firebaseArray(ref);
return {
listAll:function(){
var deferred=$q.defer();
deferred.resolve(Users);
return deferred.promise;
},
listById:function(key){
var deferred=$q.defer();
var userRef= ref.child(key);
var user=$firebaseObject(userRef);
deferred.resolve(user);
return deferred.promise;
}
};
});
这篇关于与firebase自动生成的id的角度列表详细视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
