AngularJS dynamisch ein Array von String erstellen und es dann

Question

Vergleich Ich baue eine ionische Anwendung, die wie folgt aussieht: http://plnkr.co/edit/eYKQPM?p=preview

Der Ablauf der Anwendung ist wie folgt:

1. Der Nutzer klickt auf ‚Start‘ Taste und dann startet ein Timer von 5 Sekunden (Benutzer sollte sich an alle Paare erinnern). Nachdem 5 Sekunden vergangen sind, soll der Benutzer in den nächsten 20 Sekunden das entsprechende Paar vor dem Wort füllen. Rückmeldung wird mit einem Häkchen gegeben, wenn er das richtige Paar ausfüllt
2. Wenn der Benutzer die richtigen Paare aufgefüllt hat, kann er auf "Stop" klicken.

3. ERLEDIGEN: Ich habe ein Array aller Paare von $scope.expectedSequence aber ich weiß nicht, wie ich $scope.enteredSequence Array aufbauen kann, und sie dann in $scope.checkCorrectness Funktion überprüfen, um Progression zu machen oder das gleiche Niveau zu spielen. Ab sofort habe ich dort einen Dummy-Check, um Fortschritte zu machen. Es sollte im Idealfall überprüfen so etwas wie:

   if (angular.equals ($ scope.expectedSequence, $ scope.enteredSequence)) {...}

Mein Controller:

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

Answer 1

Mit folgenden Code-Änderung konnte ich richtig $ scope.entereddSequence

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

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