I'm trying to get a simple angularFire example working, and am seeing anything I add to my synced Firebase db being immediately deleted. I expected the input box to sync to a string in /items/foo. What am I missing?
angularFire is a little aggressive about removing items that don't match the expected data type. There's discussion about fixing this behavior on Github if you're interested, but you can work around it by explicitly specifying the data type using the 4th argument:
var url = 'https://andreystest.firebaseio.com/items';
angularFire(url, $scope, 'items', '');
The fourth argument is an empty string, which tells angularFire that whatever is stored at the URL is a string. The default model type is an array ([]).
Edit: There seems to be some issues with jsFiddle and Angular. You are missing the ng-app and ng-controller directives which means angular is never initialized. However, even after adding those tags I can't get it to work in jsFiddle, it does work on a regular web page though. Give http://misc.firebase.com/~anant/angular-test.html a try!
Related
So I have the following angular 1.3 code
Restangular.one('user',270).get().then(function(existingUser){
existingUser.password = "foo";
existingUser.put();
});
Which grabs the user at http://api.dev/user/270 fine, however, the existingUser.put(); makes a PUT request to http://api.dev/user, ignoring the ID.
Changing to
Restangular.one('user/270').get().then(function(existingUser){
existingUser.password = "foo";
existingUser.put();
});
works fine, however looking at the examples on the Restangular homepage, it appears my original code should also work fine. Any pointers to whats going wrong?
Solved, issue was related to the existingUser being returned having a existingUser.userID attribute rather than a existingUser.id attribute.
Its this attribute that restangular seems to use for future post/put requests, rather than the id passed into the one() command.
I´m trying to find a good way to use Baconjs together with Angularjs in conjuctions with Angular-Bacon.
Now digesting from Bacon to the Angular scope works perfectly fine but I´m stumbling with Angular-Bacons $scope.$watchAsProperty(property) within Angulars ng-repeat:
Let´s say I have the Angular scope $scope.databaserecords and render it out with:
<div ng-repeat="record in databaserecords">
Each of the records has a record.checked property and I want to handle all checked records together in one Bacon stream, for example to add a certain tag to all records at once.
At this point using $scope.$watchAsProperty(databaserecords) I get no Bacon events when checking or unchecking certain records, so how could I accomplish to receive these changes back in Bacon?
I might also mention, that using $scope.$watchAsProperty(property) out of ng-repeat, for example for input fields, works well without any problem.
Thanks for your help! :)
If I've understood correctly, your actual databaserecords remains the same throughout the scope, so you'll need to invoke $watchAsProperty with the objectEquality argument set to true:
$scope.$watchAsProperty("databaserecords", true)
By default angular opts to compare objects with a simple object equality check. In your case the list object remains the same, so a deeper check is necessary. This is already implemented in angular-bacon but it seems I've omitted it from the docs.
For some reason when getData uses angular resource to bring the data it is being called twice, causing the resource to do it REST request twice too <--- bad...
Any idea why and how to solve it?
Here a working testcase/plunker example that recreates this scenario (look at the browser console - "getData being called...." displayed twice ) b.t.w as you can see I'm not really using the resource to bring real data, just to demonstrate the scenario, In my real app I do use the resource to bring real data and its being called twice just like in this example,
Thanks ahead
After looking into the src of the ng-table I noticed the following
$scope.$watch('params.$params', function(params) {
$scope.params.settings().$scope = $scope;
$scope.params.reload();
}, true);
Which means that the tables calls it 'getData' on count/filter/group/groupBy/page/sorting
which explains the behavior I was seeing.
When you call params.count(...) you ask ng-table to refresh data as you change page size. That's why you have two get-data calls.
If you don't want to have paging, then remove calls params.count and params.total.
If you need paging, then set page size and do not change it in getData.
This happened to me with a weird reason. getData get called twice on init (first load) only. changing page or sorting didn't call getData twice. The reason was that at init the ng-table directive was hidden in the template file.
Thank #Alexander Vasilyev. I understood my problem as you said. I want to explain a litte more here. In fact, the object "params" is the object configuration the table ng-table, then if "params" changed (ex: count or a property of the object), ng-table will invoke function getData() to refresh table.
In my case, I want to get information in the object "params" and change it but I dont want to refresh ng-table. I did it by cloning object "params" et work his object copied. Clone the object in JS with jQuery :
var resultParams = jQuery.extend(true, {}, params.$params);
And then, I will work on the object resultParams instead of "params" original.
I would like to use the angular-bootstrap-ui typeahead feature with the $http object.
A simple use case is found at the following plunk:
http://plnkr.co/edit/eGG9Kj?p=preview
How do I manipulate the returned json BEFORE it is being rendered?
I will be working with a more comlex json structure than a simple array.
How to overwrite the html-template being used so I can apply my own styles?
In case no results are found an empty typeahead-dropdown is shown. How do i avoid this?
Thanks for any hints.
For questions (1) and (2) I believe that this is duplicate of Bootstrap-UI Typeahead display more than one property in results list?. Have a look at the answers in there that provide solutions to customizing various part of results displaying, including template override.
If the above doesn't solve your issue please update your question.
For (3) - it this example it is a back-end issue since it returns [""] where there are no matches while it should return []. So it has nothing to do with the typeahead directive - just make sure that your backend returns empty array when there are no matches.
Using Restangular for AngularJS, keep getting an object object from Mongolab.
I'm sure it has to do with Promise but not sure how to use/implement this coming from old Java OO experience.
(Side note, would something like Eloquent Javascript, some book or resource help me understand the 'new' Javascript style?)
The small web app is for Disabled Students and is to input/edit the students, update the time they spend after school and then output reports for their parents/caregivers every week.
Here's the code that returns undefined when popping up a new form (AngularJS Boostrap UI modal)
I personally think Restangular & the documentation is a great addition so hope it doesn't dissuade others - this is just me not knowing enough.
Thanks in advance
app.js
...
$scope.editStudent = function(id) {
$scope.myStudent = Restangular.one("students", id);
console.log($scope.myStudent);
}
I'm the creator of Restangular :). Maybe I can help you a bit with this.
So, first thing you need to do is to configure the baseUrl for Restangular. For MongoLab you usually do have a base url that's similar to all of them.
Once you got that working, you need to check the format of the response:
If your response is wrapped in another object or envelope, you need to "unwrap" it in your responseExtractor. For that, check out https://github.com/mgonto/restangular#my-response-is-actually-wrapped-with-some-metadata-how-do-i-get-the-data-in-that-case
Once you got that OK, you can start doing requests.
All Restangular requests return a Promise. Angular's templates are able to handle Promises and they're able to show the promise result in the HTML. So, if the promise isn't yet solved, it shows nothing and once you get the data from the server, it's shown in the template.
If what you want to do is to edit the object you get and then do a put, in that case, you cannot work with the promise, as you need to change values.
If that's the case, you need to assign the result of the promise to a $scope variable.
For that, you can do:
Restangular.one("students", id).get().then(function(serverStudent) {
$scope.myStudent = serverStudent;
});
This way, once the server returns the student, you'll assign this to the scope variable.
Hope this helps! Otherwise comment me here!
Also check out this example with MongoLab maybe it'll help you :)
http://plnkr.co/edit/d6yDka?p=preview