CODEWITHSUNDEEP
angularjsionic-framework
Thinker
Thinker

Reputation: 5356

Angular checkmark for list elements

I am trying to have checkmarks in a list for those list elements where a certain condition is met.

My Html:

<div class="col col-70" ng-if="showBothEnterLists">
        <ion-list>
          <ion-item ng-repeat="w in word_pair | limitTo:4">
            <input placeholder="Enter word" type="text" ng-model="word">
            <input placeholder="Enter pair" type="text" ng-model="pair" ng-change="check(word, pair)">
            <div ng-show="showCheckMark" align="right"><i class="ion-checkmark myCheckmark"></i></div>
          </ion-item>
        </ion-list>
      </div>

Corresponding code in my controller:

$scope.word_pair = [

  {'word':'Carla', 'pair':'Lion'},
  {'word':'Sophie', 'pair':'Lotta'},
  {'word':'Jannes', 'pair':'Stubbi'},
  {'word':'Martin', 'pair':'Wolle'},
  {'word':'Flo', 'pair':'Ign'},
  {'word':'Rere', 'pair':'Rose'},
  {'word':'Jean', 'pair':'Tamara'},
  {'word':'Memo', 'pair':'Elk'},
  {'word':'Nila', 'pair':'Naph'}

  ]
...

$scope.check = function(word, pair) {     
  for(var i=0; i < $scope.word_pair.length; i++) {       
   if($scope.word_pair[i].word == word && $scope.word_pair[i].pair == pair) {    
    $scope.showCheckMark=true
    $scope.checkCount++
  }
 }
}

However, this code gives me checkmarks for all list items when condition for the first item is met.

enter image description here

How can I fix this?

Upvotes: 0

Views: 2254

Answers (1)

eltonkamami
eltonkamami

Reputation: 5190

UPDATE without remapping

create an object in your scope that will hold the user's answers

$scope.answers = {}

set the ng-model of each input in conjunction with the $index

<ion-item ng-repeat="w in word_pair | limitTo:4">
   <input placeholder="Enter word" type="text" ng-model="answers['word'+$index]">
   input placeholder="Enter pair" type="text" ng-model="answers['pair'+$index]" ng-change="check(word, pair)">
   <div ng-show="showCheckMark(answers['word'+$index], answers['pair'+$index])" align="right"><i class="ion-checkmark myCheckmark"></i>asdadas</div>
</ion-item>

Finally the only thing showCheckMark has to do is check if the key and value exist

$scope.showCheckMark = function(word, pair){
  return $scope.word_pair.filter( item => item.word == word && item.pair == pair).length;
}

Here is a working example in Codepen

Upvotes: 1

Related Questions