2016-07-08 2 views
1

Я здание приложение Ionic, который выглядит следующим образом: http://plnkr.co/edit/eYKQPM?p=previewangularjs динамически создает массив строки, а затем сравнивая его

Поток приложения выглядит следующим образом:

  1. пользователь щелкает «Пуск» и затем запускается таймер с 5 секундами (пользователь должен помнить все пары). По истечении 5 секунд в течение следующих 20 секунд пользователь должен заполнить соответствующую пару перед словом. Обратная связь дается с отметкой галочки, если он заполняет правильную пару.
  2. Если пользователь закончил заполнять правильные пары, он может нажать кнопку «Стоп».
  3. TODO: У меня есть массив всех пар из $scope.expectedSequence однако я не знаю, как я могу построить массив $scope.enteredSequence, а затем проверить их в $scope.checkCorrectness функции, чтобы сделать прогрессию или играть на том же уровне. На данный момент у меня есть фиктивный чек, чтобы сделать прогрессию. Это в идеале должно проверить что-то вроде:

    если (angular.equals ($ scope.expectedSequence, $ scope.enteredSequence)) {...}

Мой контроллер:

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

    $scope.level=1 
    $scope.leftList=false 
    $scope.enterTextView=false 
    $scope.previewView=false 
    $scope.promptAction='' 
    $scope.promptLevel='' 
    $scope.enteredSequence=[] 
    $scope.expectedSequece=[] 
    $scope.show_stop_button=false 
    $scope.show_start_button=true 



    $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.expectedSequece.push($scope.word_pair[v].pair) 
    console.log($scope.expectedSequece) 

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

$scope.start = function(){ 

    $scope.show_start_button=false 
    $scope.leftList=true 
    $scope.previewView=true 
    $scope.promptLevel='Level: ' + $scope.level 

    $scope.counter1=5 
    $timeout($scope.startFilling, 5000) 
    $scope.onTimeout = function(){ 

    $scope.counter1--; 
    mytimeout = $timeout($scope.onTimeout,1000); 

    if($scope.counter1==0){ 
     $timeout.cancel(mytimeout); 
    } 
    } 
    var mytimeout = $timeout($scope.onTimeout,1000); 

} 


$scope.startFilling = function(){ 

    $scope.promptLevel='Level: ' + $scope.level 
    $scope.promptAction='Now enter the corresponding pairs in the right column' 
    $scope.enterTextView=true 
    $scope.previewView=false 
    $scope.show_start_button=false 
    $scope.show_stop_button=true 

    $scope.counter2=20 

    $timeout($scope.checkCorrectness, 20000) 
    $scope.onTimeout = function(){ 

    $scope.counter2--; 
    mytimeout = $timeout($scope.onTimeout,1000); 

    if($scope.counter2==0){ 
     $timeout.cancel(mytimeout); 
     $scope.enterTextView=false 
     $scope.previewView=false 
     $scope.leftList=false 
     $scope.show_stop_button=false 
     $scope.show_start_button=true 
    } 
    } 
    var mytimeout = $timeout($scope.onTimeout,1000); 
} 

$scope.checkCorrectness = function(){ 

    $scope.ok=true 
    $scope.enterTextView=false 
    $scope.previewView=true 
    $scope.promptAction='' 
    $scope.promptLevel='' 

    /*dummy check*/ 
    if($scope.ok){ 

    $scope.level= $scope.level + 1 
    $scope.promptLevel='Level: ' + $scope.level 

    } 

} 

}) 

Mt HTML:

<ion-view view-title="Dashboard"> 
    <ion-content class="padding"> 

    <div align="center" ng-if="promptLevel"> 
     <h3>{{promptLevel}}</h3> 
    </div> 

    <div align="center" ng-if="promptAction"> 
     <h3>{{promptAction}}</h3> 
    </div> 
    <div align="center" ng-if="counter1"> 
     <h3>{{counter1}}</h3> 
    </div> 
    <div align="center" ng-if="counter2"> 
     <h3>{{counter2}}</h3> 
    </div> 


    <div class="row"> 

     <!-- Left half of the screen to hold list of words --> 
     <div class="col col-50" align="center" style="padding-top:0.2cm;" ng-if="leftList"> 
     <ion-list> 
      <ion-item ng-repeat="item in word_pair" id="list_one"> 
      <h2>{{item.word}}</h2> 
      </ion-item> 
     </ion-list> 
     </div> 

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

     <div class="col col-50" ng-if="enterTextView"> 
     <ion-list> 
      <ion-item ng-repeat="item in word_pair" id="list_two"> 
      <input ng-model="pair" type="text" ng-change="partnerCheck(pair,item.word)"> 
      <div ng-show="showPartner[pair]" align="right"><i class="ion-checkmark myCheckmark"></i></div> 
      </ion-item> 
     </ion-list> 
     </div> 

    </div> 

    <div align="center" style="padding-bottom:1cm;" ng-if="show_start_button"> 
     <button class="button button-dark start-button" ng-click="start()">Start</button> 
    </div> 
    <div align="center" ng-if="show_stop_button"> 
     <button class="button button-dark start-button" >Stop</button> 
    </div> 


    </ion-content> 
</ion-view> 
+0

Другими словами, вы хотите проверить, если массив равняется другой (в том числе порядка)? – developer033

+0

Да, правильно. Я попытался что-то вроде $ scope.enteredSequence.push (p) в partnerCheck(), но он создает что-то вроде [«P», «Pa», «Pat», «Patk», «Patka», «Patkar» ...] , Я не понимаю, как я могу построить такой массив введенных правильных значений в поле ввода. – Nitish

+0

На самом деле ваш plnkr является неполным .. – developer033

ответ

0

С следующей модификации кода я был в состоянии получить правильный $ scope.entereddSequence

$scope.partnerCheck = function(p,i_p){ 

    if($scope.partnerCheckList[i_p] == p){ 
    $scope.showPartner[p] = true; 
    $scope.enteredSequence.push(p) 
    } 
}