Question

我正在使用Angular编写问卷，从资源中检索问题。根据设计，我必须切换自定义图标而不是标准单选按钮图标。我提出的解决方案是隐藏无线电输入（使用不透明度/滤波器）并绝对在输入上放置div，其尺寸与无线电输入相同。单击无线电输入将切换作为自定义图标的背景图像。不幸的是，这必须在IE8中工作，所以传统的CSS：检查战术已经出局。

问题块看起来像这样：

    <h2>{{ quiz.questions[asked].questionText }}</h2>
    <ul>
        <li ng-repeat="answer in quiz.questions[asked].answers">
            <label>
                <input type="radio" ng-model="$parent.picked" name="answer" value="{{ answer.answerID }}"/>
                <div class="radio-mimic {{ checked }}"></div>
                {{ answer.answerText }}.
            </label>
        </li>
    </ul>
    <a class="btn" ng-click="submitAnswer()" ng-show="picked != null">
        Submit
    </a>

以下是我的控制器的精简版本供参考：

app.controller('QuizController', function($scope, Quiz) {
    $scope.quiz = Quiz.get({quizID = X}); // Angular $resource
    $scope.picked = null;
    $scope.asked = 0;
    $scope.answers = [];

    $scope.submitAnswer = function() {
        $scope.asked++;
        $scope.picked = null;

        // Push answer selected onto answers array
        // Check if # asked == number of questions in quiz to determine flow
        // If another question, $scope.quiz = Quiz.get({quizID = newQuizID});
        // Else show results    
    };
});

对于我收到问题的每个答案，我正在输出无线电输入和包含在带有答案文本的标签中的div图标。单击答案将更改重复的父作用域中“已拾取”的值，因此仅在用户选择答案时显示“提交”按钮。

我遇到的问题是如何处理div类的{{checked}}逻辑以显示何时选择输入。当我单击一个输入时，其范围内的div需要获得一个名为“checked”的类。另外，如果我点击该范围之外的其他答案，则ng-repeat中的其他范围需要知道，以便将其“已检查”值重置为null或''。我知道一些值必须进入父范围，如'pick'，但父和ng-repeat范围的重叠导致我有些困惑。我可以用jQuery轻松地做到这一点，但是想把这个纯粹的Angular作为我学习的一部分。

Answer 1

我找到了一个解决我的问题的方法，使用ng-class和一个表达式来比较父范围的'pick'和内部范围的answerID：

<div class="radio-mimic" ng-class="{checked: $parent.picked == answer.answerID}"></div>

Angular - 基于无线电输入选择的ng-repeat内部切换元素类

1 个答案: