Nitish Nitish - 5 months ago 18
AngularJS Question

Angular binding input value to list item to check if it is same

I have an array of 'word-pair' pairs which I am populating on my screen. Out of pairs, words will be populated in the left side list and on right side I am trying to have input field and when I enter corresponding pair value, checkmark should be shown.

enter image description here

My controller

.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'}

]

})


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


How can I implement such an input field here? on I can perhaps use ng-if directive.

Answer

Try this-

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

I think this should work.