Angular - 基於無線電輸入選擇的ng-repeat中的切換元素類

我正在使用Angular編寫問卷以從資源中檢索問題。根據設計，我必須切換自定義圖標而不是標準單選按鈕圖標。我提出的解決方案是隱藏無線電輸入（使用不透明度/濾波器），並絕對將輸入的div與無線電輸入的尺寸相同。點擊收音機輸入將切換一個背景圖像，這是自定義圖標。不幸的是，這必須在IE8中工作，所以傳統的CSS：檢查策略已經出來。Angular - 基於無線電輸入選擇的ng-repeat中的切換元素類

問題塊將是這個樣子：

<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中的其他範圍需要知道爲了將其「檢查」值重置爲空或「」。我知道一些價值將不得不進入像「挑選」這樣的父級範圍，但是父級和ng-repeat範圍的重疊正在引起我一些混淆。我可以使用jQuery輕鬆完成此任務，但希望保留這種純粹的Angular作爲我學習的一部分。

來源

2013-08-23 SirTophamHatt

我找到了解決我的問題，通過使用納克級和表達比較父範圍的「挑」與內範圍的answerID：

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

來源

2013-08-23 19:16:33 SirTophamHatt

Angular - 基於無線電輸入選擇的ng-repeat中的切換元素類

回答

相關問題