Eckiges Häkchen für Listenelemente

Question

Ich versuche, in einer Liste für diese Listenelemente, in denen eine bestimmte Bedingung erfüllt ist, ein Häkchen zu setzen.

Meine 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> 

entsprechender Code in meinem 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++ 
    } 
} 
} 

jedoch dieser Code mir Häkchen für alle Listenelemente gibt, wenn die Bedingung für den ersten Punkt erfüllt ist .

Wie kann ich dieses Problem beheben?

Answer 1

UPDATE ohne Remapping

ein Objekt in Ihrem Bereich erstellen, die die Benutzer Antworten

$scope.answers = {} 

stellen Sie das ng-Modell jeden Eingang in Verbindung mit den $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> 

halten

Schließlich muss showCheckMark lediglich prüfen, ob der Schlüssel a nd Wert existieren

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

Hier ist ein funktionierendes Beispiel in Codepen