How to decrement a "Heart Symbol"? ♥

Hi , can you help me how can I decrement this “:heart:” symbol in ionic ?

Here’s I want to happen ,
:heart: :heart: :heart: :heart: :heart: (The first output)

Every time I click the button It will decrement into 1 heart
:heart: :heart: :heart: :heart: (This is the second output after clicking the button)

is this code posible ?

No this won’t be possible, because :heart: is a character not an integer.

I’ve solve my problem ! :smiley:

I used ng-show to hide and show the heart lives :smiley:
I connected the life variable that every time it decrements it hides one of the heart life :smiley:

<font color="red"  ng-show="life1">♥</font> 
     <font color="red" ng-show="life2">♥</font>  
     <font color="red" ng-show="life3">♥</font> 
    <font color="red" ng-show="life4">♥</font>
    <font color="red" ng-show="life5">♥</font> 

                  if($ == 4){
                      $scope.life1 = false;
                  }else if($ == 3){
                    $scope.life2 = false;
                  }else if($ == 2) {
                    $scope.life3 = false;
                  }else if($ == 1) {
                    $scope.life4 = false;
                  }else if($ == 0) {
                    $scope.life5 = false;

Hi @emsee71,

Well I would solve it differently because you are repeating a lot. You need to have a variable to store the number of hearts, a method to decrease the value and a method to display the number of hearts showing “:heart:” characters.

In your controller:

$ = 5;

$scope.decreaseLife = function() {

$scope.printLife = function() {
    return new Array($ + 1).join("♥");

In your view:

Number of hearts: {{ life }} <br/>
<div ng-click="decreaseLife()">{{ printLife() }}</div>

This will render like:

Number of hearts: 5

Click or press the hearts and they will decrease.

1 Like

Wow, Thanks for making it more easily to solve my problem :smiley: , THank you very much ! :smile: