将索引和离子卡绑在一起 - 离子

Question

我正在做一个关于离子的项目。这是一个测验类型的应用程序。我在顶部有可滚动的div，其中包含所有问题编号。在下面，我有问题出现的卡片。截图如下：

这些卡具有可跳转的功能，用户可以来回刷卡。

我的要求是当用户从顶部问题编号面板中选择特定问题时，应显示相应的问题并突出显示所选问题。此外，当用户刷卡时，顶部的问题编号的选择也应该改变。

我使用css为上面的面板创建了一个圆圈并使用ng-repeat，我正在重复问题编号。我在问题编号上添加了一个ng-click选项并传递了索引。这样我就可以显示相应的问题。通过使用它，我能够以一种方式绑定两个面板。我也需要反向绑定它。因此，当用户刷卡时，问号应该改变。

此外，我需要突出显示ng-repeat中的特定项目以显示已选中。我试过：在css中悬停属性，它以某种方式突出显示所选项目但不如预期的好。

这是我的代码：

＆＃13;

＆＃13;

angular.module('quiz', ['ionic'])
  .controller('QuizController', function($scope) {

    $scope.nodes = [{
      count: 1,
      disabled: false
    }, {
      count: 2,
      disabled: false
    }, {
      count: 3,
      disabled: false
    }, {
      count: 4,
      disabled: false
    }, {
      count: 5,
      disabled: true
    }];

    $scope.goToQuestionNumber = function(index) {
      console.log('goToQuestionNumber: ', index);
      $scope.currentQuestion = index;
      $scope.act_type = $scope.quiz.clues[$scope.currentQuestion].act_type;
      $scope.isActive = $scope.nodes[index];
      changeTemplate();
    }

    $scope.next = function() {
      if ($scope.currentQuestion != ($scope.nodes.length - 1)) {
        $scope.currentQuestion++;
        $scope.currentTry = 1;
        $scope.act_type = $scope.quiz.clues[$scope.currentQuestion].act_type;
        $scope.failureResult = false;
        changeTemplate();
      }


    }
    $scope.prev = function() {
      if ($scope.currentQuestion != 0) {
        $scope.additionalActivity = false;
        $scope.addtionalQuestionAvailability = false;
        console.log('Left swipe');
        $scope.currentQuestion = $scope.currentQuestion - 1;
        $scope.currentTry = 1;
        $scope.act_type = $scope.quiz.clues[$scope.currentQuestion].act_type;
        $scope.failureResult = false;
        changeTemplate();
      }

    }


  })

＆＃13;

.events {
  position: relative;
}
.event,
span .event,
.event span {
  content: "";
  float: left;
  position: relative;
  padding: 3%;
  margin: 0% 2% 0% 2%;
  border-radius: 50%;
  background-color: lightgrey;
  border: 3px solid darkgray;
  top: 15%;
  left: 2%;
  font-size: 15px;
  z-index: 1;
  text-align: center;
  line-height: 150%;
  color: hotpink;
}
.slider-column {
  position: relative;
  display: flex;
  flex: 0 0 30%;
}
.slider-column::after {
  content: '';
  height: 3px;
  width: 100%;
  background-color: #66a3ff;
  position: absolute;
  top: 45%;
  z-index: -5;
  margin-left: 0%;
  border-radius: 1% 1% 1% 1%;
  padding: 1%;
}
.slider-column:last-child:after {
  content: '';
  height: 2%;
  width: 100%;
  background-color: transparent;
  position: absolute;
  top: 30%;
}
/*.event::after{
  content:'';
  height:3px;
  width:170%;
  background-color:#6d6dff;
  position: absolute;
  top: 45%;
  z-index: -5;
  margin-left: 55%;
  border-radius: 1% 1% 1% 1%;
  padding: 1%;
}*/

.event::before {
  content: '';
  height: 5px;
  width: 100%;
  background-color: transparent;
  position: absolute;
  top: 30%;
  z-index: -5;
  padding-left: 10%;
}
.events:first-child:before {
  content: '';
  height: 5px;
  width: 100%;
  background-color: transparent;
  position: absolute;
  top: 30%;
}
.events:last-child-1:after {
  content: '';
  height: 5px;
  width: 100%;
  background-color: transparent;
  position: absolute;
  top: 30%;
}
.timeline-text {
  z-index: 4;
  top: 0;
  bottom: 5px;
}
.enabled-event {
  background: red;
}
.event:hover {
  border-color: red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.0/js/ionic.bundle.min.js"></script>
<ion-content ng-app="quiz" ng-controller="QuizController">
  <div style="padding-top:10px;padding-left:5px;">
    <label class="hamburger" style="float:left">Score:{{totalPoints}} pts</label>

    <button style="float:right" class="button button-clear button-small bonus-button" ng-click="bonus()">Try Bonus</button>
  </div>
  <br>
  <br>
  <ion-scroll direction="x" class="timeline-scroll">
    <div class="timeline">

      <div class="events row">
        <div class="slider-column" ng-repeat="count in nodes">
          <span class="event " ng-click="goToQuestionNumber($index)" ng-if="!count.disabled">
        {{count.count}}/{{nodes.length}}
      </span>
          <span class="event" ng-click="goToQuestionNumber($index)" ng-if="count.disabled">
        {{count.count}}/{{nodes.length}}
      <!-- </span> -->
        </div>

      </div>
    </div>
  </ion-scroll>
  <br>
  <br>
  <div ng-include="currentClueTemplate" ng-swipe-right="prev()" ng-swipe-left="next()" class="question-card"></div>

</ion-content>

＆＃13;

＆＃13;

＆＃13;

任何人都可以帮助我吗？