2016-07-18 17 views
0

特定の条件が満たされているリスト要素のチェックマークをリスト内に表示しようとしています。リスト要素の角度チェックマーク

マイ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++ 
    } 
} 
} 

しかし、このコードは私のすべてのリスト項目のチェックマークを与えます。

enter image description here

私はこれをどのように修正することができますか?

答えて

1

UPDATE

を再マッピングせずに

$scope.answers = {} 

ユーザーの答えを保持するあなたのスコープ内のオブジェクトを作成$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> 
と併せて、各入力のNG-モデルを設定

最後に、showCheckMarkが行う必要があるのは、キーがND値は、あなたがどのような条件を提示することができCodepen

+0

に実施例である。ここ

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

存在しますか? w.word && w.pairはデフォルトですべての入力ボックスとチェックマークを塗りつぶしますが、自然です。 – Nitish

+0

@Nitish挿入された単語とペアが同じオブジェクトに存在する場合は、チェックマークを表示する必要がありますか? – eltonkamami

+0

はいいいえ!ワードとペアの組み合わせがword_pairの配列に存在する場合、チェックマーク – Nitish

関連する問題