角度绑定输入值以列出项目以检查它是否相同

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> 

我认为这应该工作。