AngularJS synchronisation between $scope and $localStorage - angularjs

Slightly new to AngularJS so please bear with me.
I'm trying to implement ngStorage but had a doubt. If I assign something like this:
$scope.$storage = $localStorage.default({
var: 'foo'
});
And then if $scope.storage.var is changed when an AJAX call is made, does it also change the value of $localStorage.var or do I have to manually re-assign it?
If I do have to manually re-assign it, what's the best way to do so among the options below? (Please do let me know if there's any other way to do it)
$localStorage.var = 'foo2';
$localStorage.$reset({
var : 'foo2'
});
delete $localStorage.var followed by $localStorage.var = 'foo2'
Thanks in advance.

I just used the third option and it seemed to work correctly. That is:
delete $localStorage.var;
$localStorage.var = 'foo2';

Related

AngularJS + Hoodie: How to do a correct data flow?

I would like to combine AngularJS and Hoodie, but I am not sure how to do it the correct way.
Let's say I have a basic AngularJS controller
app.controller("c", function($scope) {
$scope.table = [];
$scope.onAdd = function(newEntry) {
$scope.table.push(newEntry);
};
});
After clicking on e.g.
<button ng-click="onAdd('test');">add</button>
Everything works as expected. But now I want to use Hoodie. Currently I am trying this:
app.controller("c", function($scope) {
$scope.table = [];
$scope.onAdd = function(newEntry) {
$scope.table.push(newEntry);
};
hoodie.store.on('entries:add', $scope.onAdd);
});
and anywhere: hoodie.store.add("entries", tmpObject);
The onAdd() gets called and is inserted into the table array (verified in the developer console), but my html table (via ng-repeat="entry in table") is not updated.
First question: Do you know why? What do I think wrong here?
Second question: What would be a good way to combine Hoodie and AngularJS? Would it be better to $watch on the table and insert items into it and store it via Hoodie after getting a change or the other way around and add a new item to the hoodie.store and then on("entries:add") do some Angular stuff?
Thanks in advance!
Heyho =)
First: If you update data-structure via an 'external' event(in this case hoodie), you need to trigger the Digest-Cycle e.g. $rootScope.$apply();
Second: There is a hoodie-angular-plugin that is written by Elmar and me. That solved the most of your basic tasks. That would be the easiest way in this case.

Nested resources with Restangular

I am using Restangular. In my application, I have two REST resources,
To get the User based on the ID
/users/123
To get the buddy details of the user
users/123/buddies/456
Below is the code I am using,
//get the user
Restangular.one("users", 123).get().then(function(user){
$scope.user = user;
});
Restangular makes a call to /users/123. So far so good.
//get the buddy
var getBuddy = function(){
$scope.user.one("buddies", "456").get();
}
But here, Restangular makes the call to /users/buddies/456 instead of /users/123/buddies/456.
I have gone through the samples provided and I can't spot a mistake. Looks like I am overseeing the obvious but this issue has been frustrating me for more than a day now. Does anyone have a hint?
Thanks,
try forming url like this.
Restangular.one("users", 123).one("buddies", 456).get().then(function(buddy){
$scope.buddy = buddy; });
or remove double quotes of "456" e.g one("buddies", 456), it should work.
The answer lies in the Restangular documentation
If you are using MongoDB, remember to configure the id field.

Angularjs select default when loading remotely

I'm trying to have a default value in a SELECT element using angular, and it doesn't seem to be working. No matter what I do, it always selects a blank default element, when the data is loaded remotely in the controller
Here's my HTML:
<select
ng-options="Domain.Name for Domain in Domains"
ng-model="CurrentDomain"
ng-init="CurrentDomain = Domains[0]"
></select>
Here's the relevant controller code:
$scope.Domains = $resource('api/domain').query();
$scope.CurrentDomain = $scope.Domains[0];
I realize that this question has been asked many times, and I've read all other questions, but none of the suggestions seem to work. If anyone has any other suggestions, please let me know.
Thanks.
The problem is the promise. $scope.Domains is promise and pending to resolve. So, $scope.Domains[0] is undefined at that point of time.
So, the correct code is as below
var Domains = $resource('api/domain').query(function(){
$scope.Domains = Domains;
$scope.CurrentDomain = Domains[0];
});
Plunkr version - http://plnkr.co/edit/ppjSWDKT4lHWvEcY0PMC?p=preview
Refer to https://github.com/angular/angular.js/issues/4298, ng-init is no longer able to resolve promise.

RESTAngular PUT not saving entire payload

I am trying to make a PUT request using RESTAngular. I am fairly new to Angular as well as RESTAngular.
Following is code snippet which works.
$scope.itemToUpdate = Restangular.all($scope.slug);
$scope.itemToUpdate.getList().then(function(items){
var item = items.one($routeParams.id);
item.name = $scope.singular.name;
item.description = $scope.singular.description;
item.put();
});
This doesn't work.
$scope.itemToUpdate = Restangular.all($scope.slug);
$scope.itemToUpdate.getList().then(function(items){
var item = items.one($routeParams.id);
item = $scope.singular;
item.put();
});
Don't know what am I doing wrong.
$scope.singular gets it data initially as following. Restangular.one('roles', $routeParams.id).getList().$object.
Basically idea is to update this model from form and also prepopulate the form with relevant data when slug matches the id. I can change the way things are wired up if required. So feel free to suggest best practices.
Edit 2
This official demo is very helpful in solving the issue.
http://plnkr.co/edit/d6yDka?p=preview
When Restangular returns resouce array\object it adds some methods on the object such as put which has been wired up to update the object on put call to server.
In second case you are assigning item=$scope.singular. $scope.singular may not be a Restangular object and hence does not work.
This official demo is very helpful in solving the issue. http://plnkr.co/edit/d6yDka?p=preview

problems with this event in AngularJS

I playing with AngularJS, now when I want to follow this example:
Everthings works untill when I want to fire up the last event: clearCompleted(); My browser complains right away saying:
$scope.clearCompleted = function(){
$scope.todos = _.filter($scope.todos, function(todo){
return !todo.done;
});
};
ReferenceError: _ is not defined
at Object.TodoCtrl.$scope.clearCompleted
and I knwo that it just this event...wondering why? I also dont understand this syntax: _.filter (what is this _.?)
I have feeling that is this: ** _.filter(....**
any idea?
Thanks very much for yr time!
Y/
It seems as if your trying to use Underscore.js without including it in a script tag.

Resources