Cross check input check box values against an array in angular

Question

I have an array like following in my controller:

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

  ]

On my HTML template I have two input lists wherein I am supposed to enter few of the combinations from above array and if the combination is correct then there will be a green checkmark.

My HTML looks like following as of now:

<!-- Level 2 Enter view for words for corresponding pairs --> 
      <div class="col col-50" ng-if="enterTextViewLeft">enterTextViewLeft
        <ion-list>
          <ion-item ng-repeat="item in randomWord_pair" id="list_two">
            <input placeholder="Type here" ng-model="word" type="text" ng-change="leftPartnerCheck(word,item.pair)">
            <div ng-show="showPartner[word]" align="right"><i class="ion-checkmark myCheckmark"></i></div>
          </ion-item>
        </ion-list>
      </div>

<!-- Level 1 Enter view for pairs for corresponding words -->
      <div class="col col-50" ng-if="enterTextViewRight">enterTextViewRight
        <ion-list>
          <ion-item ng-repeat="item in randomWord_pair" id="list_two">
            <input placeholder="Type here" ng-model="pair" type="text" ng-change="rightPartnerCheck(pair,item.word)">
            <div ng-show="showPartner[pair]" align="right"><i class="ion-checkmark myCheckmark"></i></div>
          </ion-item>
        </ion-list>
      </div>

Screenshot of how it actually looks (this is from level 1 of the game, for level 6 instead of word list in left side, input list will be there too, so basically left and right input list to fill in any combination from above array in any order):

UPDATE: I have couple of functions as well:

    $scope.rightPartnerCheckList = {};
    for(var v in $scope.randomWord_pair){
     $scope.expectedPairSequece.push($scope.randomWord_pair[v].pair)
     $scope.rightPartnerCheckList[$scope.randomWord_pair[v].word] = $scope.randomWord_pair[v].pair;
   }

   $scope.leftPartnerCheckList = {};
   for(var v in $scope.randomWord_pair){
     $scope.expectedWordSequece.push($scope.randomWord_pair[v].word)
     $scope.leftPartnerCheckList[$scope.randomWord_pair[v].pair] = $scope.randomWord_pair[v].word;
   }

   $scope.showPartner = {};
   $scope.rightPartnerCheck = function(p,i_p){
     if($scope.rightPartnerCheckList[i_p] == p){
       $scope.showPartner[p] = true;
       if($scope.enteredSequence.indexOf(p)==-1){
        $scope.enteredSequence.push(p)
      }
    }
  }

  $scope.leftPartnerCheck = function(w,i_w){
   if($scope.leftPartnerCheckList[i_w] == w){
     $scope.showPartner[w] = true;
     if($scope.enteredSequence.indexOf(w)==-1){
       $scope.enteredSequence.push(w)
     }
   }
 }

How can I implement such a logic (for two input lists and checking for existing combinations in array) or incorporate in my existing logic?

Yea it was somewhat missing! I updated the question. Basically how can I implement such a logic? — Thinker
– Thinker, Commented Jul 18, 2016 at 13:50

theblindprophet · Accepted Answer · 2016-07-18 14:35:25Z

1

I have created an example of how to do this and I will explain below:

HTML:

<div ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="w in word_pair">
      <td> <input type="text" ng-model="guesses[$index]"> </td>
      <td> <input type="text" ng-model="otherguesses[$index]"> </div> </td>
      <td> <input type="checkbox" ng-checked="check(guesses[$index], otherguesses[$index])" disabled> </td>
    </tr>
  </table>
</div>

AngularJS:

$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.guesses = [];
 $scope.otherguesses = [];

$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) {
       return true;
     }
   }
}

Use ng-repeat for every object inside the array word_pair
Create inputs and checkbox for each object
Create an arrays ($scope.guesses and $scope.otheruesses) and store the user input there (ng-model="guesses[$index]" and ng-model="otherguesses[$index]")
$index is the current index of ng-repeat which is associated with the index inside word_pair
Check if they match (check(guesses[$index], otherguesses[$index]))

You can check for duplicates inside check if you wish.

CodePen: http://codepen.io/theblindprophet/pen/zBRNmN

edited Jul 18, 2016 at 14:35

answered Jul 18, 2016 at 14:07

theblindprophet

7,9577 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thinker Over a year ago

No! I guess my question isn't too clear (see above screenshot in parenthesis). I want on both sides input lists of size say 4. In left list input boxes player should be able to fill in any 'word' from word_pair and on right hand side any 'pair' from word_pair, (order doesn't matter), and if the combination is correct then checkmark! My working plunkr: plnkr.co/edit/0y3pad?p=preview

Thinker Over a year ago

I have one question though..can any pieces of my existing code be used/modified to incorporate your logic, the overall functionality is almost similar? If you would like to, can you take a look at my Plunker?

theblindprophet Over a year ago

Just copy my functions and ng-model declarations. Shouldn't be too hard to implement it.

Collectives™ on Stack Overflow

Cross check input check box values against an array in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related