I am currently using angularJs in conjunction with cordova.
Within my ng-repeat loop, each item has an ng-click event that stores the value of the item in an array. Additionally, when I click on an item, it toggles a class on the corresponding div (using the $index of ng-repeat), similar to a checklist.
The issue arises when I reload the ng-repeat, as the classes I added by clicking on the items are lost. I attempted to reapply these classes by calling a function that refreshes the items displayed in the ng-repeat, but unfortunately, the classes were not being added back.
Below is a snippet of my code :
<div id="ami" class="list-group">
<div href="#" class="list-group-item" ng-repeat="ami in listeAmis"> {{ami.pseudo}}<i id="checkAmi{{$index}}" class="fa fa-circle-o pull-right" ng-click="mapCtrl.checkAmi(ami.pseudo, $index);"></i><i class="fa fa-user pull-left" ></i></div>
</div>
Javascript
var amisNotifies = [];
mapCtrl.checkAmi = checkAmi;
function checkAmi(pseudo, id) {
var info = ({
pseudo: pseudo,
id: id
});
var getIndexOf = function (psdu) {
for (var i = 0; i < amisNotifies.length; i++) {
if (amisNotifies[i].pseudo === psdu) {
return i;
}
}
return -1;
};
if (amisNotifies.length > 0) {
var index = getIndexOf(pseudo);
if (index > -1) {
// The item already exists, so remove it.
Array.prototype.splice.call(amisNotifies, index, 1);
$("#checkAmi" + id).addClass("fa-circle-o");
$("#checkAmi" + id).removeClass("fa-check-circle-o");
}
else {
// Item does not exist, add it.
amisNotifies.push(info);
$("#checkAmi" + id).removeClass("fa-circle-o");
$("#checkAmi" + id).addClass("fa-check-circle-o");
}
} else {
// The array is empty, so add the item.
amisNotifies.push(info);
$("#checkAmi" + id).removeClass("fa-circle-o");
$("#checkAmi" + id).addClass("fa-check-circle-o");
}
console.log(amisNotifies);
}
Even after attempting to reapply the classes upon reloading the data shown by the ng-repeat, the classes remain unchanged...
if (amisNotifies.length > 0) {
for (var i = 0; i < amisNotifies.length; i++) {
console.log(amisNotifies[i].id);
$("#checkAmi" + amisNotifies[i].id).removeClass("fa-circle-o");
$("#checkAmi" + amisNotifies[i].id).addClass("fa-check-circle-o");
}
}