列表元素的角度选中标记

Question

我正在尝试在列表中为那些符合某个条件的列表元素添加复选标记。

我的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>

我的控制器中的相应代码：

$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++
  }
 }
}

但是，当满足第一项的条件时，此代码为我提供了所有列表项的复选标记。

我该如何解决这个问题？

Answer 1

更新而不重新加载

在您的范围内创建一个可以保存用户答案的​​对象

$scope.answers = {}

将每个输入的ng-model与$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>

最后，showCheckMark唯一要做的就是检查密钥和值是否存在

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

以下是https://www.w3.org/TR/WCAG20-TECHS/H44.html

中的工作示例