i am stuck on the following problem:
i have a select element were the user picks an option.
this option is saved to the localstorage.
now i want to use this stored value as path for a firebasearray.
basically it seems to work but i cant get the firebasearray ref to update without hitting reload.
my firebasearray factory:
.factory("MyFireFactory", ["$firebaseArray", "$localStorage",
function($firebaseArray, $localStorage) {
var ref = firebase.database().ref('demodata/' + $localStorage.selectedoption);
return $firebaseArray(ref);
}
])
After reading the angular docs angular docs if found out that
"...All services in Angular are singletons..." wich basically means if i understood it correctly that they only run once.
Wich in my case meant the i had to move my factory code to the controller so that the data from localstorage can be used.
my now working controller:
var ref = firebase.database().ref('demodata/' + $localStorage.selectedoption);
$scope.demoscop = $firebaseArray(ref);
Related
I'm using FireBase and trying to do some queries, the results are logging in but are not visible in the HTML $scope.
var shopRef = firebaseDataService.intro;
$scope.shops = [];
var taskRef = shopRef.orderByChild("cat").equalTo("Accomodation");
taskRef.on("value", function(snapshot) {
var snapData = snapshot.val();
console.log(snapData);
$scope.shops.push(snapData);
});
When I use $scope.$apply(), I manage to get the data updated to shops, but it's still not passing anything to my directive .
<search-card shops="shops"> </search-card>
<p> Shops are {{shops}}</p>
I got it working somehow with $firebaseArray
$scope.shops = $firebaseArray(taskRef);
but I`d still like to know what I'm doing wrong and why it's not working with the snapshot.
From the angularfire docs:
// read data from the database into a local scope variable
ref.on("value", function(snapshot) {
// Since this event will occur outside Angular's $apply scope, we need to notify Angular
// each time there is an update. This can be done using $scope.$apply or $timeout. We
// prefer to use $timeout as it a) does not throw errors and b) ensures all levels of the
// scope hierarchy are refreshed (necessary for some directives to see the changes)
$timeout(function() {
$scope.data = snapshot.val();
});
});
It seems that using $scope.apply() will not refresh the entire hierarchy (and hence the directive). Try using $timeout as prescribed instead
That being said, I think you should go with the $firebaseArray() option as that strikes me as the most "angular" solution
Well, I'm making a switch using Angular Material switch, but it's not starting with its initial state as you can see on the picture. The label aside it is the value of it.
And as you can see, the switch starts deactivated from the beginning.
To Start, I'm getting the results from a get request, and putting it into an array.
$scope.questions = [];
The value I'm showing on the picture can be false or true.
On the md-switch, I've referenced directly to the property inside of the array.
<tr ng-repeat="quest in questions">
<td><md-switch ng-model="quest.status">{{quest.status}}</md-switch></td>
</tr>
How can I set the value initially for the switch?
This is a Codepen with a test.
http://codepen.io/anon/pen/BjzpNN
but this seems awkward tho. Doing my example it works fine, but with my development environment, it doesn't work.
This is the console.log of my array, I'm getting this as a get request using $resource.
Well, what is the problem?
Edit2:
Even more awkward, using the properties ng-true-value and ng-false-value the switch doesn't get the initial state.
I updated your JavaScript below, to use a service to get the results. However, I am just returning the hard coded data from your sample. You should change the service to go and fetch your data. The service will be used as a promise, and will return when complete.
(function(){
var app = angular.module('test', ['ngMaterial'])
.service('testService', function() {
// This should be modifed to then call your external API to get the data instead of hard coded results
var questions = [
{ name : "teste", status : true},
{ name : "teste2", status : false},
{ name : "teste3", status : true}
];
return questions;
})
.controller('testController', ['$scope', 'testService', function($scope, testService) {
$scope.questions = [];
$scope.questions = testService; // Use service to get data, will update questions when promise returns.
}]);
}())
There is no check on the data loading, so your screen will be empty until the service returns data. However, when the service returns data, your view should be updated.
As your CodePen showed, you do not need the ng-true-value/ng-false-value, just the ng-model to list the field to get the setting from. The ng-true-value is the value to be set when you toggle the switch (Angular md-switch docs if you want something different from True/False (say A/B).
You might also need to use ng-disabled if you want to protect the switches from changing.
Another Question here,
I am using firebase and angular js, and trying to return data from my database to the console log using this code :
function userCtrl($scope){
$scope.userName="";
$scope.myData = new Firebase ("https://yjyc-signup.firebaseio.com/Entries");
$scope.users={};
$scope.saveUser = function(){
$scope.myData.push({userName: $scope.userName});
$scope.userName="RESET";
};
$scope.myData.on('value', function(snapshot) {
$scope.users = snapshot.val();
console.log("Author: " + $scope.users.name);
});
but the console return "Author: Undefined" although I have a value in my database of a name.
is anybody can help me that would be amazing
When using AngularFire you need to sync the reference before you can get any data from it. Also you're trying to use a Firebase function that doesn't exist for AngularFire as far as I'm aware. Instead try to register a $watch function in your controller and each time that $watch executes you grab the information from the reference. Something like this:
myApp.controller('UserCtrl', ['$scope', function($scope) {
$scope.$watch('watchedExpression', function() {
var ref = new Firebase ("https://yjyc-signup.firebaseio.com/Entries");
var syncedRef = $firebase(ref);
console.log('Author:' + syncedRef.name); //You need to change this path to work with your Firebase tree structure
});
}]);
If you don't want to register a $watch function you can look at the threeway data-binding, you can look at this here in the AngularFire documentation.
I want to do a custom login for a demo of my doing, but I encountered a problem.
I use the username to access a reference url inside Firebase, I get a returned object. If I want to access a single attribute, I get the undefined value, but if I add in my html {{returnedObj.name}} the value is displayed.
Why is that?
angular.module('Demo').controller('loginCtrl', ['$scope', '$firebase', '$location', function($scope, $firebase, $location){
$scope.user = {};
$scope.check = function(){
console.log('https://fabritzio-demo.firebaseio.com/users/' + $scope.user.name);
$scope.returnedObj = $firebase(new Firebase('https://fabritzio-demo.firebaseio.com/usuarios/' + $scope.user.name)).$asObject();
alert($scope.returnedObj.name); // returns undefined value
};
}]);
Firebase values are loaded asynchronously. The value will not yet have been loaded into $scope.returnedObj when the alert fires.
There are a couple of ways to handle values loading asynchronously from Firebase, for example using $loaded to get a promise:
$scope.returnedObj.$loaded().then(function () {
alert($scope.returnedObj.name);
});
The value is displayed in the template because Angular watches all $scope variables for changes. When the value is loaded (milliseconds later), it is immediately displayed.
I try to integrate Firebase on a simple AngularJS project based on UI-Router sample.
This seems to works pretty well using navigation flow... but actually a got an undefined variable while accessing directly the nested view with for example the direct url : #/contacts/42
You can test and see the source code on the following plunker :
http://plnkr.co/edit/1CnwHl9rsOifzWoSYg8V?p=preview
As you can see in firebug I got the following error :
Error: contacts[i] is undefined
Contacts is a variable of the factory 'ContactDB' which is promised from firebase backend and resolved data of the state 'contacts'.
It seems $scope.contacts is corrupted. Only the first item is set...
I really don't understand the reason of this issue... ?!
It would be really GREAT if somebody can help me.
Thanks in advance to have a look.
I am also using ui-router and firebase and having issues trying to get the number of contacts to display on state route change. I am using numChildren() in my contacts controller.
.controller( 'contactsCtrl', function contactsCtrl( $scope, filterFilter, orderByPriorityFilter, contacts, FBURL ) {
var contactsRef = new Firebase(FBURL+'/contacts');
$scope.entryLimit = 50;
$scope.search = $scope.lastSearch.search;
contactsRef.on('value', function(snap) {
$scope.contacts = contacts;//contacts is a resolved $firebase Object
$scope.contactsCount = snap.numChildren();
});
$scope.$watch('search', function(oldTerm, newTerm) {
$scope.filtered = filterFilter(orderByPriorityFilter($scope.contacts), oldTerm);
$scope.contactsCount = $scope.filtered.length;
$scope.lastSearch.search = oldTerm;
//sets contacts list page to 1 on new searches
if (oldTerm != newTerm) {
$scope.contactListPos.page = 1;
}
});
});
This works fine if you load the /contacts route from the browser bar or refresh the page. But if I change states from say my /home state which has a link to go to /contacts, $scope.contactsCount will display 0. I also have a $watch in the search input, only when I do a search does the contactsCount update. contactsCount will also update correctly when I go into a contacts.detail child state and then back to the contacts state.
I was able to get it working by editing the $watch callback using if/else statement:
if (newTerm === oldTerm) { //first run
return;
} else {
$scope.contactsCount = $scope.filtered.length;
}