Question

我的控制器中有一个如下的数组：

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

  ]

在我的HTML模板上，我有两个输入列表，其中我应该从上面的数组中输入一些组合，如果组合正确则会有一个绿色的复选标记。

我的HTML看起来像现在一样：

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

它实际看起来的截图（这是从游戏的第1级，对于第6级而不是左侧的单词列表，输入列表也会在那里，所以基本上左右输入列表来填写任何组合来自以任何顺序排列数组）：

更新我也有几个功能：

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

如何实现这样的逻辑（用于两个输入列表并检查数组中的现有组合）或合并到我现有的逻辑中？

Answer 1

我已经创建了一个如何执行此操作的示例，我将在下面解释：

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;
     }
   }
}

对数组ng-repeat

word_pair

为每个对象创建输入和复选框
创建数组（$scope.guesses和$ scope.otheruesses）并将用户输入存储在那里（ng-model="guesses[$index]"和ng-model="otherguesses[$index]"）
$index是ng-repeat的当前索引，与word_pair
检查它们是否匹配（check(guesses[$index], otherguesses[$index])）

如果您愿意，可以在check内查看重复项。

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

以角度

1 个答案: