Question

我正在开发一个测验软件，我想在每个问题上显示一个数字指针。我怀疑如何在不同的问题状态和一系列数字的顶部显示指针的不同类。

我编写了两个senarios

ng-class="{

    'ibps-answered': question.selected !== null,
    'ibps-not-answered': question.selected === null

    }",

    ng-click="quiz.setActiveQuestion($index)"">1

问题的四个不同状态如下

`class="ibps-not-visited"`:questions at initial stage without touching "`default`"

`class="ibps-not-answered"`:questions visited but options are not attempted

`class="ibps-review"`:"have a special button for marking it for review in future without answering it." 



class="ibps-answered":"Have attempted the questions"

class="ibps-review-answered":"have attempted and also marked for review"

第一个条件是默认情况。我怎样才能实现其他四个条件。请给我一些建议。

Answer 1

我会创建一个函数来返回类

ng-class={{getClass()}}

$scope.getClass = function(){
  //logic here
  return className;
}

您当然可以在函数中添加输入以扩展逻辑

Answer 2

使用嵌套的内联if-then语句：

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

Answer 3

您可以在控制器中创建一个函数来控制和检查每个问题的状态，然后使用ng-class来应用每个类：

<li ng-class="{ 'ibps-answered':yourCtrl.isAnswered('Question1'),  'ibps-not-visited':yourCtrl.isNotVisited('Question1'), ....}">

如果你的问题编号，请在函数参数中使用它作为标识符

如果标识符在您的问题数据中，则它与ng-repeat一起使用

如何根据对象的状态显示一个类

3 个答案: