I have an array in my LocalStorage that I manipulate with ngStorage.
I am trying to remove items from there but when I use
$localStorage.someArrayName.splice(id, 1);
only the first removed item works fine, then removing stop working as I would like to.
I also tried something like this:
if (id === $localStorage.someArrayName.length) {
$localStorage.someArrayName.pop();
}
else if (id === 0) {
$localStorage.someArrayName.shift();
}
else {
$localStorage.someArrayName.splice(id, 1);
}
But I get even more buggy result
I tried from the example in https://github.com/gsklee/ngStorage like this:
delete $localStorage.someArrayName[id];
but it deletes the values and I get null,null,null values in my local storage array. And then I even get ng repeat error about duplicate values:
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed...
I cannot handle it. I am not sure if it's some small issue or I am doing something fundamentally wrong. Can you give me some guidance? Thank you in advance!
This is how my array looks like saved in the localstorage:
[{"content":"something"},{"content":"else"}] //etc...
So you are using ng-repeat for something and your ids are there. If you use $index as value for your id parameter when you remove at item from the array, your array numbering is not longer the same and the id is not what you expect to be.
You also do not need the pop() and shift() methods.
Asuming your ng-repeat is something like this:
<element ng-repeat="item in someThing">
{{item.prop}} <childelem ng-click=delete($index)>delete</childelem>
</element>
and if your function is:
$scope.delete = function (id) {
$localStorage.someArrayName.splice(id, 1);
};
Then you would need something like this:
<element ng-repeat="item in someThing">
{{item.prop}} <childelem ng-click=delete(item)>delete item</childelem>
</element>
and:
$scope.delete = function (item) {
$localStorage.someArrayName.splice($localStorage.someArrayName.indexOf(item), 1);
};
and this is going to remove the entire {"content":"something"}
from your array.
No idea if this is the right direction of the problem and if this is the scenario, but I hope it will help you. Best regards!
Related
I need to know how to get an object by position with AngularJS, I return from WebAPI in C# a DataSet with 4 DataTable and save it in a $scope on my JS, when i do console.log($scope.data) in the Chrome Console see like the image. Now when i do console.log($scope.data[1]) in Chrome Console i get undefinided, but when i do console.log($scope.data.inputs0) i see the correct data. What is wrong? Thanks :)
There is no $scope.data[1]. It's not an array, it's an object. You can do a few things :
use a js library like "Underscore.js" and use _.findWhere($scope.data, {key : "someData"}); which will return the object at that key (this assumes you know the key name).
Loop through each set of inputs with an angular.ForEach. Ex:
angular.forEach($scope.data, function(item, key){
//Now something like $scope.data[0] is passed in essentially
});
If you don't know the name of it, you won't be able to get it. You could also remap your object $scope.data to something more descriptive or to keys of 0, 1, 2 etc. Having them listed as you do probably isn't the best way to handle this.
Finally i extract the key's names in an angular foreach and work with em.
angular.forEach($scope.dataInputs, function (value, key) {
var nombrePos = key.slice(-1); //key=inputs0 and nombrePos=0
...
});
I am creating a angular application, which has one li with ng-repeat and a text box for searching the out put in ng-repeat, the repeated item has a delete "X" button which deletes the record from DB. problem i am facing is how to remove searched record from the array using splice.
http://plnkr.co/edit/oPBofD2wL2ZUrD23f8Rr?p=preview
go to above plnkr click on any of the "x" without searching, then it will get removed from the list . but when you search for something lets say ruby then only ruby will come into the list but by clicking on "x" it will still appear . I need help in removing the searched field from the array using array operation, i dont want to regenerate that array again.
instead of just using the index as a parameter, calculate your index with a search of the json element in the array.
Like so:
$scope.delete = function(project) {
idx = $scope.projects.indexOf(project);
$scope.projects.splice(idx, 1);
};
DEMO
The problem is that your idx is set to $index. That is the index of the ng-repeat, not the index of the array so when the list is filtered you're now deleting the wrong element.
(You'll notice this if you clear the search-box after deleting)
If you change your HTML to
X
The delete function will receive the actual element that needs to be removed and can be rewritten to
$scope.delete = function(project) {
$scope.projects.splice($scope.projects.indexOf(project), 1)
};
The reason is that you are sending the $index for removing, instead of that pass the id like
X
Working Demo
Try this out
$scope.delete = function(idx) {
for ( var i = 0; i < $scope.projects.length; i++){
if ($scope.projects[i].id === idx)
{
$scope.projects.splice(i, 1);
}
}
};
I am using angularfire $add method to add basic js objects of the form {id:integer,name:name}
Now, if I want to update a particular item (which usually has a firebase-assigned key like "-JEcA_f70efHbKi5js7j" or something, my impression is that I should use the $save method.
Here is how I am trying to do this:
$scope.chosenColors = $firebase(myChosenColorsRef);
$scope.updateColor = function(data){ //data is a JS object like {id:'id',name:'name'}
if($scope.chosenColors.$getIndex().length>0){
var keys = $scope.chosenColors.$getIndex();
keys.forEach(function(key, i) {
if($scope.chosenColors[key].id!=data.id){//if id matches I want to update name
$scope.chosenColors[key] = {id:data.id,name:data.name}
$scope.chosenColors.$save[key];
return;
}
});
}else{
$scope.chosenColors.$add(data);
}
But this doesn't appear to have any effect on the firebase...any ideas what I am doing wrong?
Firstly, you should call the $save method instead of simply accessing it with a key:
$scope.chosenColors.$save(key);
Secondly, you're iterating over all the keys to figure out which one you want to save which is pretty inefficient. You should change your updateColor argument to take the key as an argument.
<div ng-repeat="(key, color) in chosenColors">
<a ng-click="updateColor(key, color)">Update</a>
...
</div>
function updateColor(key, data) {
$scope.chosenColors[key] = data;
$scope.chosenColors.$save(key);
}
Thanks for that. I will give it a go.. the reason I am iterating over all items is I am responding to a drag event on a canvas item, and I need to know which item it is that is being dragged...I suppose I could keep that as part of the dragged object and address it directly..baby steps!
Regards,
I am trying to build an array containing some data-attributes that a div have. It looks like this.
<div class="myclass" data-test="hello"></div>
I've come this far, but not sure how to continue:
$('#container .myclass').each(function () { mArray. })
I have no idea what to with the array...
And the output I am looking for is
array 0
... test = hello...
or something like that.
I guess I could take all ITEMS by just writing them and adding, but it seems like there should be an easier way of doing so.
data() returns an object containing all the data attributes. Could that be something?
$('#container .myclass').data()
If your div has attributes beginning with the data-prefix (data-test="hello" data-info="some text.." and so on), you can store the values of all these attributes in an object with the jQuery data method, for example like this:
var myObject = $("div.myclass").data();
This is one possible solution , using map(): DEMO HERE
var dataTests =$('#container .myclass').map(function(){
return this.getAttribute('data-test');
}).get();
alert(dataTests[0]);//element 0
OK, I'm missing something here and I just can't seem to find it because the logic seems correct to me, but I'm certain I'm not seeing the error.
var VisibleMarkers = function() {
var filtered = _.reject(Gmaps.map.markers, function(marker) {
return marker.grade != $('.mapDataGrade').val() && !_.contains(marker.subjects,$('.mapDataSubjects').val())
});
return filtered
}
I'm using underscore.js and jQuery to simplify my javascript work.
So right now, I'm checking by means of selects which data gets to be rejected and then I display the filtered markers on the (google) map (if it helps at all, this is using gmaps4rails which is working perfectly fine, its this bit of javascript that's making me lose the last of the hairs on my head).
Currently, the code functions 100% correctly for the ".mapDataGrade" select, but the ".mapDataSubjects" isn't. Now the markers object has a json array of the subjects (this is for students) and each item in the array has its ID. Its this ID that I am supposed to be checking.
Can someone see what I'm doing wrong?
If there's more info that needs to be included, please let me know.
This is on plain javascript on a RoR application using gmaps4rails
Now the markers object has a json array of the subjects (this is for students) and each item in the array has its ID. Its this ID that I am supposed to be checking.
_.contains compares a values, but it sounds like you want your iterator to compare a value to an object's "id" property. For that, _.some would work; it's like contains, except that, instead of comparing values, you can write the comparison as a function:
Returns true if any of the values in the list pass the iterator truth test.
Here's how you'd use it:
!_.some(marker.subjects, function(subject) {
return subject.id == $('.mapDataSubjects').val();
})
If I'm right, the whole line should be like this:
return marker.grade != $('.mapDataGrade').val() &&
// check that none of the subjects is a match
!_.some(marker.subjects, function(subject) {
// the current subject is a match if its ID matches the selected value
return subject.id == $('.mapDataSubjects').val();
});