Question

We are creating a quiz using angularjs. We want to show the radiobutton list direction vertically or horizontally. If it is horizontally we want do show in 2 columns. Help me to show horizontally or vertically

Have provided the code in

  var app = angular.module("quizApp", []);

        app.controller("quizCtrl", function ($scope) {
            $scope.questions = [
                {
                    question: "Which is the largest country in the world by population?",
                    options: ["India", "USA", "China", "Russia"],
                    answer: 2,
                    direction:0
                },
                {
                    question: "When did the second world war end?",
                    options: ["1945", "1939", "1944", "1942"],
                    answer: 0,
                    direction: 1
                }
            ];
        });

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<body>
    <div ng-app="quizApp" ng-controller="quizCtrl">
        <div data-ng-repeat="quiz in questions track by $index" data-ng-init="quizIndex = $index" layout="column">
            <div layout="row">
                <span data-ng-bind="quiz.question"></span>
            </div>
            <div layout="row" data-ng-repeat="option in quiz.options track by $index" data-ng-init="optionIndex = $index">
                <input type="radio" data-ng-value="{{option}}" style="margin-right: 5px;"
                                name="Options_{{quizIndex}}_Response_{{optionIndex}}" />
                 <span id="spnAnswer_{{quizIndex}}_{{optionIndex}}" data-ng-bind="option" />
            </div>
        </div>
    </div>
</body>

Answer 1

您可以在转发器的div中使用ng-class来显示水平或垂直方式。

您的HTML模板可能如下所示：

<div ng-class="'class-for-horizontal-display': !showVertical, 'class-for-vertical-display': showVertical" data-ng-repeat="quiz in questions track by $index" data-ng-init="quizIndex = $index" layout="column">

    </div>

并且在你的控制器中你应该有一个$ scope变量“showVertical”，如：

$scope.showVertical = false

How to display the answer direction for a questionarie based on Direction

1 个答案: