角度綁定輸入值以列出項目以檢查它是否相同

Question

我有一組「字對」對，我將其填充到屏幕上。成對出現時，單詞將填充在左側列表中，右側我嘗試輸入字段，當我輸入相應的雙值時，應顯示覆選標記。

我控制器

.controller('DashCtrl', function($scope) { 

    $scope.message='Welcome to Ionic' 

    $scope.word_pair = [ 

    {'word':'Nitish', 'pair':'Patkar'}, 
    {'word':'Mihir', 'pair':'Janaj'}, 
    {'word':'Jannes', 'pair':'Stubbi'}, 
    {'word':'Martin', 'pair':'Wolle'} 

    ] 

}) 

我的HTML：

<div class="row"> 

     <!-- Left half of the screen to hold list of words --> 
     <div class="col col-50" align="center"> 
     <ion-list> 
      <ion-item ng-repeat="item in word_pair"> 
      {{item.word}} 
      </ion-item> 
     </ion-list> 
     </div> 

     <!-- Right half of the screen to hold list of pairs --> 
     <div class="col col-50""> 
     <ion-list> 
      <ion-item ng-repeat="item in word_pair"> 
      {{item.pair}} 

      <input type="text"> 
      <span><i class="ion-checkmark"></i></span> 
      </ion-item> 
     </ion-list> 
     </div> 

    </div> 

我怎麼能在這裏實現這樣的輸入域？我可以使用ng-if指令。

Answer 1

嘗試這個 -

$scope.word_pair = [ 
{'word':'Nitish', 'pair':'Patkar'}, 
{'word':'Mihir', 'pair':'Janaj'}, 
{'word':'Jannes', 'pair':'Stubbi'}, 
{'word':'Martin', 'pair':'Wolle'} 
] 
$scope.partnerCheckList = {}; 
for(var v in $scope.word_pair){ 
    $scope.partnerCheckList[$scope.word_pair[v].word] = $scope.word_pair[v].pair; 
} 
$scope.showPartner = {}; 
$scope.partnerCheck = function(p,i_p){ 
    if($scope.partnerCheckList[i_p] == p){ 
    $scope.showPartner[p] = true; 
    } 
} 

<input ng-model="pair" type="text" ng-change="partnerCheck(pair,item.word)"> 
<span ng-show="showPartner[pair]"><i class="ion-checkmark"></i></span> 

我認爲這應該工作。