I'm trying to make it where when a user creates a widget, and then reloads the page (it'll appear because it's saved in localStorage) and then once you create another widget, I want to be able to delete the old widget before the page refreshes but it deletes the widget that the user clicked and the new widget.
Each time a new widget it created, it gets assigned a property name 'id' and the value is determined based on what is already in localStorage and it finds the next available (or not in use) id number. The widgets array also gets sorted from smallest id to largest id before setting it back to localStorage.
I've tried attaching a click listener for the delete button on the widget both when it's created and when the document is loaded. But that wasn't working.
Now i'm thinking I have to call a function with the id as its param to add a click listener to all the widgets that are appended to the document and when a new widget is created.
app.js:
function addRemoveListener(id) {
let storageUi = localStorage.getItem('ui');
let localUi = JSON.parse(storageUi);
$(`#widget-${id} > span > .widget-clear`).click(() => {
for (let i = 0; i < localUi.widgets.length; i++) {
let thisWidget = `#widget-${id}`;
if (localUi.widgets[i].id == id) {
localUi.widgets.splice(i, 1)
}
$(thisWidget).remove();
console.log(localUi)
}
let newUi = JSON.stringify(localUi);
localStorage.setItem('ui', newUi);
})
}
widget.js:
static appendToDom(ui) {
let storageUi = localStorage.getItem('ui');
let localUi = JSON.parse(storageUi);
for (let i = 0; i < localUi.widgets.length; i++) {
let widget = localUi.widgets[i];
let query = () => {
if (widget.type == 'humidity') {
return `${Math.floor(ui.weather.currently.humidity * 100)}`
} else if (widget.type == 'eye') {
return `${Math.floor(ui.weather.currently.visibility)}`
} else if (widget.type == 'windsock') {
return `${Math.floor(ui.weather.currently.windSpeed)}`
} else if (widget.type == 'pressure') {
return `${Math.floor(ui.weather.currently.pressure)}`
} else if (widget.type == 'uv-index') {
return `${ui.weather.currently.uvIndex}`
}
}
$('nav').after(`<div class="widget widget-${widget.size}" id="widget-${widget.id}">
<span>
<i class="material-icons widget-clear">clear</i>
<i class="material-icons widget-lock-open">lock_open</i>
<i class="material-icons widget-lock">lock_outline</i>
</span>
<div class="data-container">
<img src=${widget.image}>
<h1> ${widget.type}: ${query()} ${widget.unit} </h1>
</div>
</div>`)
$(`#widget-${widget.id}`).delay(1000 * i).animate({ opacity: 1 }, 1000);
$(`#widget-${widget.id}`).css({ left: `${widget.left}`, top: `${widget.top}`, 'font-size': `${widget.dimensions[2]}` })
$(`.widget`).draggable();
$(`#widget-${widget.id}`).css({ width: `${widget.dimensions[0]}`, height: `${widget.dimensions[1]}` })
addRemoveListener(i);
}
// this function is called earlier in the script when the user has selected
// which kind of widget they want
let makeWidget = () => {
let newWidget = new Widget(this.size, this.id, this.image, this.type, this.unit, this.dimensions);
saveWidget(newWidget);
addRemoveListener(this.id)
}
I have no problems with this until I delete an existing widget after I create a new one, and before refreshing.
You might have a problem with the id that is passed to your addRemoveListener function. It could be passing the same id for any widget so the loop will delete the UI because thisWidget is in the for loop. Try adding some console logging.
function addRemoveListener(id) {
let storageUi = localStorage.getItem('ui');
let localUi = JSON.parse(storageUi);
$(`#widget-${id} > span > .widget-clear`).click(() => {
for (let i = 0; i < localUi.widgets.length; i++) {
let thisWidget = `#widget-${id}`;
if (localUi.widgets[i].id == id) {
localUi.widgets.splice(i, 1)
}
// Move this inside the if statement above.
$(thisWidget).remove();
console.log(localUi)
}
let newUi = JSON.stringify(localUi);
localStorage.setItem('ui', newUi);
})
}
or better yet, re-write it to continue if the id doesn't match
function addRemoveListener(id) {
let storageUi = localStorage.getItem('ui');
let localUi = JSON.parse(storageUi);
$(`#widget-${id} > span > .widget-clear`).click(() => {
for (let i = 0; i < localUi.widgets.length; i++) {
let thisWidget = `#widget-${id}`;
if (localUi.widgets[i].id !== id) {
continue;
}
localUi.widgets.splice(i, 1)
$(thisWidget).remove();
console.log(localUi)
}
let newUi = JSON.stringify(localUi);
localStorage.setItem('ui', newUi);
})
}
Related
I have a bunch of divs with some text in them.
I am trying to create a simple function that targets divs with a specific text and gives them a class. I also want to give the divs with other text a common class.
I have managed to target the divs with the specific texts, but I cant figure out how to target the divs with other texts.
This is the HTML
<h1>The divs</h1>
<div>High</div>
<div>Low</div>
<div>Medium</div>
<div>Hit 'em high</div>
<div>Medium rare</div>
<div>A funky name</div>
and this is the function
const divs = document.querySelectorAll('div');
function classChanger () {
for (let i = 0; i < divs.length; i++) {
if (divs[i].textContent === 'High') {
divs[i].classList.add('high');
} if (divs[i].textContent === 'Medium') {
divs[i].classList.add('medium');
} if (divs[i].textContent === 'Low') {
divs[i].classList.add('low');
} if (divs[i].textContent === 'anything') {
divs[i].classList.add('none');
}
}
};
classChanger();
I have tried to use several more if statemets with !== 'High' and so on, but they just overwrite the previous code.
So I am just wondering, how do I target the last three divs and give them the class none?
I have tried googling but I dont think im googling the right question, thats why I am asking here.
You can add High, Medium, and Low to an array. As you loop over the elements check to see if array includes the text (and set the class to the lowercase version of the text), otherwise add a none class.
const divs = document.querySelectorAll('div');
const range = ['High', 'Medium', 'Low'];
function classChanger() {
for (let i = 0; i < divs.length; i++) {
const text = divs[i].textContent;
if (range.includes(text)) {
divs[i].classList.add(text.toLowerCase());
} else {
divs[i].classList.add('none');
}
}
}
classChanger();
.high { color: red; }
.medium { color: orange; }
.low { color: yellow; }
.none { color: darkgray; }
<div>High</div>
<div>Low</div>
<div>Medium</div>
<div>Hit 'em high</div>
<div>Medium rare</div>
<div>A funky name</div>
You Can use an else if statement like this:
const divs = document.querySelectorAll("div");
function classChanger() {
for (let i = 0; i < divs.length; i++) {
if (divs[i].textContent === "High") {
divs[i].classList.add("high");
} else if (divs[i].textContent === "Medium") {
divs[i].classList.add("medium");
} else if (divs[i].textContent === "Low") {
divs[i].classList.add("low");
} else {
divs[i].classList.add("none");
}
}
}
classChanger();
If you want to target elements based on content, you first need to create a function for such purpose like:
function queryElementsWithFilter(selector, filterCallback) {
if (typeof selector !== 'string') throw new TypeError('param 1 must be a string')
if (typeof filterCallback !== 'function') throw new TypeError('param 2 must be a function')
const nodes = [...document.querySelectorAll(selector)]
return nodes.filter(filterCallback)
}
Now you can get the elements you want and do anything with them.
const textTokens = ['High', 'Medium', 'Low']
textTokens.forEach(textToken => {
const divCollection = queryElementsWithFilter(
'div',
node => node.textContent === textToken
)
divCollection.forEach(div => div.classList.add(textToken.toLowerCase()))
})
const unmatchedNodes = queryElementsWithFilter(
'div',
node => !textTokens.includes(node.textContent)
)
unmatchedNodes.forEach(div => div.classList.add('none'))
I'm working on a project with symfony 4. I want to implement a star rating system. I display 5 stars in each row in a table. I have two problems, one is more important than the other.
So the first issue is that I want to be able to retrieve the value of the star I selected. If I select 5 stars, I want to get that value back in my entity controller.
The second issue is that, currently, let's say I have 5 items in my table, so 5 rows. Currently, if I select 5 stars in one row it's selected for all rows and I can't select another value anymore. So, it's global or something.
Here is the javascript I'm using:
<script>
const stars = document.querySelectorAll('.star');
let check = false;
stars.forEach(star => {
star.addEventListener('mouseover', selectStars);
star.addEventListener('mouseleave', unselectStars);
star.addEventListener('click', activeSelect);
})
function selectStars(e) {
const data = e.target;
const etoiles = priviousSiblings(data);
if (!check) {
etoiles.forEach(etoile => {
etoile.classList.add('hover');
})
}
}
function unselectStars(e) {
const data = e.target;
const etoiles = priviousSiblings(data);
if (!check) {
etoiles.forEach(etoile => {
etoile.classList.remove('hover');
})
}
}
function activeSelect(e) {
if (!check) {
check = true;
document.querySelector('.note').innerHTML = 'Note ' + e.target.dataset.note;
}
}
function priviousSiblings(data) {
let values = [data];
while (data === data.previousSibling) {
if (data.nodeName === 'I') {
values.push(data);
}
}
return values;
}
</script>
And Here is the twig.html I'm displaying:
<td>
<i class="star" data-note="1">★</i>
<i class="star" data-note="2">★</i>
<i class="star" data-note="3">★</i>
<i class="star" data-note="4">★</i>
<i class="star" data-note="5">★</i>
<i class="note">Note:</i>
</td>
I want to be able to retrieve the value once I made a selection, and to have a different selection for each row I have.
The problem is with the "mouseover" and "mouseleave" event handlers - selectStars and unselectStars. In "selectStars", you are adding the class to only one star. And in "unselectStars", you were not resetting, or applying the "remove" class method to other stars.
Anyway, here is how I have achieved what you are trying to do:
const ratings = document.querySelectorAll('.rating');
ratings.forEach(rating =>
rating.addEventListener('mouseleave', ratingHandler)
);
const stars = document.querySelectorAll('.rating .star');
stars.forEach(star => {
star.addEventListener('mouseover', starSelection);
star.addEventListener('mouseleave', starSelection);
star.addEventListener('click', activeSelect);
});
function ratingHandler(e) {
const childStars = e.target.children;
for(let i = 0; i < childStars.length; i++) {
const star = childStars.item(i)
if (star.dataset.checked === "true") {
star.classList.add('hover');
}
else {
star.classList.remove('hover');
}
}
}
function starSelection(e) {
const parent = e.target.parentElement
const childStars = parent.children;
const dataset = e.target.dataset;
const note = +dataset.note; // Convert note (string) to note (number)
for (let i = 0; i < childStars.length; i++) {
const star = childStars.item(i)
if (+star.dataset.note > note) {
star.classList.remove('hover');
} else {
star.classList.add('hover');
}
}
}
function activeSelect(e) {
const parent = e.target.parentElement
const childStars = parent.children;
const dataset = e.target.dataset;
const note = +dataset.note; // Convert note (string) to note (number)
for (let i = 0; i < childStars.length; i++) {
const star = childStars.item(i)
if (+star.dataset.note > note) {
star.classList.remove('hover');
star.dataset.checked = "false";
} else {
star.classList.add('hover');
star.dataset.checked = "true";
}
}
const noteTextElement = parent.parentElement.lastElementChild.children.item(0)
noteTextElement.innerText = `Note: ${note}`;
}
You might notice I have a .rating class component. This is a div which I have created to hold all these "stars". Here is a link to a codepen I have created. Feel free to play around with it.
And as a note, please provide codepen (or any other) demos so that we can debug a bit better and faster.
I hope the codepen link would help you solve your problem.
I currently have this function:
function playerTurn() {
if (playedCards.length == 0) {
Selection.handSelectionLoop();
UIC.renderCardInSlot();
Selection.pushIntoPlayed();
Selection.checkPlayed()
Selection.battlePhaseSelect();
}
}`
The intended goal is that a player selects a card from their hand > then plays it in 1 of 5 possible slots > then selects one of the slots for the combat phase of the game (they could have cards in a different slot that were played in a previous turn that they would like to attack with instead).
Selection.handSelectionLoop() adds an event listener to each card in the players hand and adds a selected class to each card clicked on (or removes the class if clicked a second time).
UIC.renderCardInSlot() adds an event listener to each of the 5 possible slots in the field of play that the cards can be played in. It then renders the card with the selected class in the slot when clicked.
Selection.pushIntoPlayed() Pushes the object into the playedCards array and checkPlayed() just checks the cards value (some cards have draw card bonuses).
Selection and UIC are the modules the functions are saved in.
Selection.battlePhaseSelect() adds an event listener to each of the 5 possible slots and adds a selected-slot class to the clicked slot.
The problem I'm having is that when a card is played in a slot via UIC.renderCardInSlot() it is also adding the selected-slot class to it.
What I'd intended to happen is click in the slot to play the card. THEN click to select which slot to proceed with.
How can I achieve this?
(I had tried putting Selection.battlePhaseSelect() in an if else with (playedCards.length > 0) but when the function is called playedCards doesn't have anything in it yet.)
Selection.handSelectionLoop() is :
export function handSelectionLoop() {
let selectedCardImg = elements.Cards;
for (var i = 0; i < selectedCardImg.length; i++) {
//add event listener to each card
selectedCardImg[i].addEventListener("click", function () {
if (playedCards.length == 0) {
//test for the class backface
if (this.classList.contains("backface")) {
console.log(`opponents card`);
} else if (event.target.classList.contains("card-slot")) {
console.log(`select a card from your hand`);
}
//test for the class selected
else if (this.classList.contains("selected")) {
//if the img does have the selected class and is clicked, remove the class and remove the corresponding DOMTokenList from the selectedCards array
this.classList.remove("selected");
selectedCardsImg.shift(this.classList);
let thisCard = this.classList[1];
for (var i = selectedCards.length - 1; i >= 0; --i) {
if (selectedCards[i].cardName == thisCard) {
selectedCards.splice(i, 1);
}
}
//if the img doesn't have the selected class AND the selectedCardsImg array contains no cards, add the selected class to the img and push the DOMTokenList into the selectedCardsImg array
} else if (!this.classList.contains("selected") && selectedCards.length < 1) {
this.classList.add("selected");
selectedCardsImg.push(this.classList);
emptySelected();
//gets the corresponding card object from its classname in DOMTokenlist and pushes it into selectedCards array
pushIntoSelected();
//if the img doesn't have the selected class AND the selectedCardsImg array contains 1 card, adds the selected class to the img and pushes the DOMTokenList into SelectedCardsImg
} else if (!this.classList.contains("selected") && selectedCards.length < 2) {
this.classList.add("selected");
selectedCardsImg.push(this.classList);
emptySelected();
// removes the corresponding card object from playerHand array and pushes into the selectedCards array
pushIntoSelected();
//if the suits of both cards match
if (selectedCards[0].suit === selectedCards[1].suit) {
if ((selectedCards[0].value == "king" ||
selectedCards[0].value == "queen" ||
selectedCards[0].value == "jack") &&
(selectedCards[1].value == "king" ||
selectedCards[1].value == "queen" ||
selectedCards[1].value == "jack")) {
alert("can't play 2 royals together")
resetSelected();
}
} else {
//if the suits don't match
alert("suits must match");
//remove the cards from the selectedCards array
resetSelected();
}
}
}
});
}
}
UIC.renderCardInSlot() is:
export function renderCardInSlot() {
for (var i = 0; i < elements.cardSlotDisplay.length; i++) {
let cardSlotDisplay = elements.cardSlotDisplay[i];
//add an event listner (click)
cardSlotDisplay.addEventListener('click', function () {
while (playedCards.length === 0) {
if (cardSlotDisplay.classList.contains("player-offence")) {
removeFromHandDisplay();
//if the number of cards selected is one
if (selectedCards.length === 1) {
let card1 = selectedCards[0]
//render this card in the slot
cardSlotDisplay.insertAdjacentHTML('beforeend',
`<div class="showcard ${card1.cardName} undercard"></div>
<div class="attack-value">${card1.attackValue}</div>
`);
Selection.pushIntoPlayed();
Selection.checkPlayed();
} else if (selectedCards.length === 2) {
let sharedAttack = Selection.calculateSharedAttack(selectedCards);
let card1 = selectedCards[0].cardName;
let card2 = selectedCards[1].cardName;
cardSlotDisplay.insertAdjacentHTML('beforeend',
`<div class="showcard ${card1} undercard"></div>
<div class="showcard ${card2} overcard"></div>
`);
cardSlotDisplay.insertAdjacentHTML('beforeend',
`<div class="attack-value">${sharedAttack}</div>
`)
Selection.pushIntoPlayed();
}
} else if (cardSlotDisplay.classList.contains("player-defence")) {
//if the number of cards selected is one
if (selectedCards.length === 1) {
let card = selectedCards[0].digitValue;
let attackValue = selectedCards[0].attackValue;
let suit = selectedCards[0].suit;
//render this card in the slot
cardSlotDisplay.insertAdjacentHTML('beforeend',
`<div class="showcard backface undercard"></div>
<div class="attack-value">${attackValue}</div>
<div class="facedown-identity">${card} ${suit}</div>
`);
} else if (selectedCards.length === 2) {
let sharedAttack = Selection.calculateSharedAttack(selectedCards);
let card1 = selectedCards[0].digitValue;
let card2 = selectedCards[1].digitValue;
let suit = selectedCards[0].suit;
cardSlotDisplay.insertAdjacentHTML('beforeend',
`<div class="showcard backface undercard"></div>
<div class="showcard backface overcard"></div>
<div class="facedown-identity">${card1} + ${card2} ${suit}</div>
<div class="attack-value">${sharedAttack}</div>
`);
}
}
}
})
}
}
and Selection.battlePhaseSelect() is currently:
export function battlePhaseSelect() {
for (var i = 0; i < elements.cardSlotDisplay.length; i++) {
let cardSlotDisplay = elements.cardSlotDisplay[i];
cardSlotDisplay.addEventListener("click", function () {
console.log(event.currentTarget.childNodes[0]);
this.classList.toggle("selected-slot");
})
}
}
Using Jquery you can do:
array[0].data('id') == array[1].data('id')
and compare 2 items in an same array by their HTML dataset (in this case it's data-id="1"). Is there a way to do it with pure Javascript???
This is HTML. It's a list of images.
<li class="card" data-id="1"><img src="images/labrys.svg" alt=""></li>
<li class="card" data-id="2"><img src="images/laurel.svg" alt=""></li>
....and so on
This is JS:
let cardArray = []; //Empty Array for selected cards
cards.addEventListener("click", function (e) {
e.preventDefault();
if (e.target.nodeName==="LI"){ // If a list element is hit...
const data = e.target.dataset.id; //checking
console.log(data);
cardArray.push(e.target); //Place current card into array...
var hit = cardArray[0].dataset.id;
var hot = cardArray[1].dataset.id;// throws error
console.log (hit);
console.log (hot);
}
I am trying to do this:
var match = cardArray[0].dataset.id=== cardArray[1].dataset.id;
This project is a memory game:
https://github.com/StamatisDeli/memory-game.github.io
You have to check how many items are in the array before accessing their index.
I believe that you are trying to avoid duplicating items when the user selects a particular card multiple times through click events. if that is what you are trying to achieve, You will be facing two scenerio.
first is to make sure that the listener function does not misbehave on multiple clicks.
second is to implement a binary search algorithm to help locate items easily rather than iterating through the items one after the other during searching. the id is a great stuff to use in sorting the list items.
var processing = false, //used to handle radical click event triggers
cardArray = [];
//note, it is better to add your event listener, to the card container `ul`
//since click events on the li items will will bubble up to it.
cardContainer.addEventListener('click', function(e){
e.preventDefault();
if (processing) {
return;
}
if (e.target.tagName.tolowerCase() !== 'li') {
return;
}
processing = true;
var cardlocation = searchCard(e.target.dataset.id);
if (cardlocation > -1) {
//card is already in array. do what you wish here
}
else {
//this is a new selection. do whatever you wish here
cardArray.push(e.target);
}
processing = false; //done processing.
});
Implement a search algorithm
/**
*This one will be slow if there loads of cards in the array
*#returns int returns the card index or -1 if not found
*/
var searchCard = function(id) {
var len = cardArray.length;
while (--len >= 0) {
if (id == cardArray[len].dataset.id) {
return len;
}
}
return -1;
}
Binary Search
/**
*used when sorting the cards
*/
var sortCard = function(card1, card2) {
var id1 = parseInt(card1.dataset.id),
id2 = parseInt(card2.dataset.id);
return id1 - id2;
};
/**
* used for checking the cards search
*/
var checkCard = function(id, card) {
return parseInt(id) - parseInt(card.dataset.id);
};
/**
*performs binary search
*/
var searchCard = function(id) {
if (cardArray.length === 0) {
return -1;
}
var low = 0,
high = cardArray.length - 1,
middle = parseInt((high + low + 1)/2, 10),
locationindex = -1,
searchindex = 0;
cardArray.sort(sortCard); //sort the card array
do {
searchindex = checkCard(id, cardArray[middle]);
if (searchindex === 0) {
locationindex = middle;
}
else {
//split and recalculate the middle
if (searchindex < 0) {
high = middle - 1;
}
else {
low = middle + 1;
}
middle = parseInt((high + low + 1) / 2, 10);
}
}
while (low <= high && locationindex === -1);
return locationindex;
}
I am using angularJs with cordova.
I have a ng-repeat, on each items I have a ng-click which put the value of each item in a array. Moreover when I click, it is removing and adding a new class to the div (with the $index of ng-repeat). Like a checklist.
The fact is when, I reload that ng-repeat, I lost the classes I just added when I clicked on it.
I tried (with the array which has not changed) to re-add the class when I call the function that reload the items shown by the ng-repeat. But it doesn't add the class :/
Here are 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) {
//so already exists. now remove it.
Array.prototype.splice.call(amisNotifies, index, 1);
$("#checkAmi" + id).addClass("fa-circle-o");
$("#checkAmi" + id).removeClass("fa-check-circle-o");
}
else {
//does not exist, now add it
amisNotifies.push(info);
$("#checkAmi" + id).removeClass("fa-circle-o");
$("#checkAmi" + id).addClass("fa-check-circle-o");
}
} else {
amisNotifies.push(info);
$("#checkAmi" + id).removeClass("fa-circle-o");
$("#checkAmi" + id).addClass("fa-check-circle-o");
}
console.log(amisNotifies);
}
And so, when I reload the data shown by the ng-repeat I tried to put it but it doesn't change the class again...
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");
}
}
HTML with dynamic ng-class stocked in array depending of the index :
<div id="ami" class="list-group">
<div href="#" class="list-group-item" ng-repeat="ami in listeAmis"> {{ami.pseudo}}
<i id="checkAmi{{$index}}" ng-class="isChecked[{{$index}}]" ng-click="mapCtrl.checkAmi(ami.pseudo, $index);"></i>
</div>
</div>
Declare the numbers of variable depending the size of ng-repeat :
if ($scope.listeAmis.length > 0) {
for (var j = 0; j < $scope.listeAmis.length; j++) {
$scope.isChecked[j] = "fa fa-circle-o pull-right";
}
}
Check the line you just clicked on and change the ng-class (moreover I stock the index of the line a just clicked in order to declare $scope.isChecked[j] differently if I clicked on it ...
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) {
//so already exists. now remove it.
Array.prototype.splice.call(amisNotifies, index, 1);
$scope.isChecked[id] = "fa fa-circle-o pull-right";
} else {
//does not exist, now add it
amisNotifies.push(info);
$scope.isChecked[id] = "fa fa-check-circle-o pull-right";
}
} else {
amisNotifies.push(info);
$scope.isChecked[id] = "fa fa-check-circle-o pull-right";
}
console.log(amisNotifies);
}