0

我正在使用 Angular 编写一份调查问卷，其中的问题是从资源中检索出来的。根据设计，我必须切换自定义图标而不是标准单选按钮图标。我想出的解决方案是隐藏无线电输入（使用不透明度/过滤器）并在输入上绝对放置一个与无线电输入具有相同尺寸的 div。单击无线电输入将切换作为自定义图标的背景图像。不幸的是，这必须在 IE8 中工作，因此传统的 CSS :checked 策略已被淘汰。

问题块看起来像这样：

    <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 图标。单击答案将更改重复的父范围中“picked”的值，因此仅在用户选择答案时显示提交按钮。

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

4

1 回答 1

0

通过使用 ng-class 和一个表达式来比较父范围的“选择”与内部范围的 answerID，我找到了解决我的问题的方法：

<div class="radio-mimic" ng-class="{checked: $parent.picked == answer.answerID}"></div>
于 2013-08-23T19:16:33.260 回答