Question

我正在构建一个看起来如下的Ionic应用程序：http://plnkr.co/edit/eYKQPM?p=preview

申请流程如下：

用户点击＆＃39;开始＆＃39;按钮然后开始5秒的计时器（用户应该记住所有对）。 5秒钟结束后，在接下来的20秒内，用户应该填写单词前面的相应对。如果填写正确的对
如果用户填写了正确的对，他可以点击“停止”按钮。
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>

Answer 1

通过以下代码修改，我能够获得正确的$ scope.entereddSequence

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

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

angularjs动态创建一个字符串数组，然后比较它

1 个答案: