ラジオボタンの特定の色のみを角度で変更するにはどうすればよいですか？

Question

私はユーザーが試験を行い、最終的には選択された回答で完全なレポートを表示する検査のために角度アプリケーションを作成しました。オプションを表示するラジオボタンにng-repeatを使用しました。その緑色の他に、赤でなければなりませんが、それは、私は条件を使用してチェックが、それはここにすべてのラジオボタンの色を変更すると、コード

<div class="md-radio" 
      data-ng-repeat="data in vm.examQuestions.allOptions track by $index" 
      ng-class="{correct:vm.examQuestions.attemptQuestions.yourChoice === vm.examQuestions.correctanswer || 
      vm.examQuestions.correctanswer === vm.optionsArr[$index], 
     'has-error':vm.examQuestions.attemptQuestions.yourChoice !== vm.examQuestions.correctanswer}"> 
      <span class="lblOption">{{vm.optionsArr[$index]}}</span> 
      <input type="radio" id="{{$index+6}}" name="radio{{$index}}" class="md-radiobtn" 
        ng-model="vm.examQuestions.attemptQuestions.yourChoice" 
        ng-value="vm.optionsArr[$index]" 
        ng-disabled="true"> 
      <label for="{{$index+6}}"> 
       <span class="inc"></span> 
       <span class="check"></span> 
       <span class="box"></span> 
       <label ng-if="'string' === vm.checkOptionString(data);">{{data}}</label> 
       <img ng-src="{{data | examOptions}}" ng-if="'URL' === vm.checkOptionString(data);" width="40px"> 
      </label> 

誰かが、ユーザが権利を選択した場合にのみ、特定のラジオボタンに色を適用する方法を私に伝えることができているしているよりも、間違っていますまたは間違ったオプション ありがとうございました

Answer 1

これは、多くの方法で簡単に解決できますs。

まず、ngstyleとngclassを調べてみましょう。

https://angular.io/api/common/NgStyle

https://angular.io/api/common/NgClass

であっても、基本的なセレクタ、querySelectorAllのように、目的の要素を取得し、それらの要素のスタイルを変更する作業を行うだろう。 JQueryもそれを行うことができます。

どのようにすべての作業（Angularでは常に動作するとは限りませんし、上記のすべてによく遭遇します）を理解する必要があるため、これらをすべて調べてみましょう。しかしAngularを使用している場合、ngstyleとngclassは確実にあなたのホルスターに入れなければならないものです。

「Angular」と言っていますが、タグは「AngularJS」です。実際に使用しているフレームワーク、ngclass、ngstyleが存在していて、あなたが知っているものでなければなりません。

Answer 2

最初の方法：！情報に

<input ..... [checked]="item.selected" ..... /> 

セカンドを確認あなたは

input[type="radio"] { 
    /* remove standard background appearance */ 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    /* create custom radiobutton appearance */ 
    display: inline-block; 
    width: 25px; 
    height: 25px; 
    padding: 6px; 
    /* background-color only for content */ 
    background-clip: content-box; 
    border: 2px solid #bbbbbb; 
    background-color: #e7e6e7; 
    border-radius: 50%; 
} 

/* appearance for checked radiobutton */ 
input[type="radio"]:checked { 
    background-color: #93e026; 
} 

/* optional styles, I'm using this for centering radiobuttons */ 
.flex { 
    display: flex; 
    align-items: center; 
} 

....確認かに関して、CSSを変更して、radoiボタンを変更することができますし、使用方法はng-classを次のように使用できます。

<div ... data-ng-repeat="..." ....> 
<input type="radio" ng-class="{classSelected: item.selected, classNotSelected: !item.selected}"/> 
</div> 

第三の道などのようにNG-クラスを使用することができます。私はすでにNG-クラスを使用していた

<div ... data-ng-repeat="..." ....> 
<input type="radio" ng-style="selectedStyle" ng-change="selectedStyle={color:'red'}"/> 
</div>