Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Access Firebase unique ids within ng-repeat using angularFire implicit sync

I have a list of objects from Firebase using the angularFire implicit data sync, and I'd like to render their unique ids (for use in urls) along with the other data properties using ng-repeat. Can I make angularFire return in such a way that I have access to the object ids within ng-repeat, the same way that members of an angularFireCollection have an $id property? If not, what is the right way to accomplish this? Hypothetical code (that doesn't work):

Controller:

myApp.controller('ItemListCtrl', ['$scope', 'angularFire',
  function ItemListCtrl($scope, angularFire) {
    var ref = new Firebase(firebaseUrl);
    angularFire(ref, $scope, 'items');
  }
]);

View:

<div ng-repeat="item in items" >
  <a href="" ng-href="#/items/{{item.name()}}">{{item.text}}</a>
</div>
like image 645
hiattp Avatar asked Oct 10 '13 23:10

hiattp


People also ask

How to integrate angularfire2 with Firebase authentication?

To activate the Firebase Authentication service, go inside your Firebase admin area and enable the Email/Password sign-in option inside the Authentication section. Now, we’ll run the below command in the terminal to install AngularFire2 library from Node Package Manager. This command includes the Firebase SDK inside your project.

What is the latest version of the angular fire API?

Please note that, at the time of writing this tutorial, the Angular fire v.7.0 API is still in development, and isn’t feature complete; and the docs aren’t yet updated to the latest version. AngularFire provides a compatibility layer that will allow you to use the latest version of the library, while fully supporting the AngularFire v6.0 API.

How do I login to an angularfire authservice?

Inside our authService, the first thing we’ll need to do is inject the AngularFire Auth instance in the constructor. Then, we’ll create a login method, which will receive the login data (email and password), and use the signInWithEmailAndPassword AngularFire method to sign in: However, doesn’t something about our login function seem a little off?

What is FireStore in angular?

Firestore is a flexible, scalable database for mobile, web, and server development. In this article, you will learn to develop a fully functioning authentication system in Angular using Firestore. We will be using the official tool for Angular and Firebase integration – AngularFire.


2 Answers

I think all you need is:

<div ng-repeat="(name, item) in items">
  <a href="" ng-href="#/items/{{name}}">{{item.text}}</a>
</div>

The anglularFire object behaves just like a normal javascript object.

like image 198
bennlich Avatar answered Oct 13 '22 14:10

bennlich


To get the unique ID that is created via the angularfire $add method, you can use the $id property:

<div ng-repeat="item in items" >
  <a href="" ng-href="#/items/{{item.$id}}">{{item.text}}</a>
</div>
like image 44
swickblade Avatar answered Oct 13 '22 15:10

swickblade