0

我正在构建一个选择题网络应用程序。每个问题有 5 个选项。在单击按钮之前，它有一个默认按钮类：btn btn-default. 目前我有它，以便在做出选择时，所有按钮都被停用，并且会出现一个 div，其中将填充答案的解释。

选择正确答案时，我想将按钮类更改为btn btn-success，但如果选择了错误答案，我想将错误选择更改为btn btn-danger，并将正确答案更改为btn btn-warning。

这是我的控制器：

    .controller('ChoiceCtrl',['$scope', '$http', function($scope, $http){
    $scope.choiceb = true;
    $scope.isDisabled = false;
    $scope.disableClick = function() {
        $scope.isDisabled = true;
        return false;
    }
}])

这是我的 HTML：

    <div ng-controller="ChoiceCtrl">
    <div id="choices">

        <h3>Choose your answer:</h3>            
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#01</button><br>
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#02</button><br>
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#03</button><br>
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#04</button><br>
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#05</button>

    </div>

    <div id="answer" class="choiceb" ng-if="myApp.choiceb"></div>

    <hr>

    <div id="rating">
        <h4>Rate this question:</h4>
        <h4 id="thumbs">
            <a href="#">
                <i class="glyphicon glyphicon-thumbs-up" id="voteup"></i>
            </a>
            <a href="#">
                <i class="glyphicon glyphicon-thumbs-down" id="votedown"></i>
            </a>
        </h4>
    </div>

    <button class="btn btn-primary pull-right choiceb" id="next-question" ng-if="myApp.choiceb">Next Question</button>

</div>

我已经能够使用ng-class将正确答案更改为绿色，但无法将错误答案变为红色，同时以橙色突出显示正确答案。任何帮助都会很棒。谢谢！

4

0 回答 0