如何只更改角度单选按钮的特定颜色？

I have crated angular application for examination in which user gives exam and finally show full report with selected answer I have used ng-repeat for radio button to show options and I want to show user has selected answer and corrected answer if user has selected wrong than its should be red else green but it I have checked using conditions but it changing all radio button colors here is code

我有一个用于考试的角度应用程序，用户提供考试，最后显示完整的报告和选定的答案我已经使用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>

can someone tell me how to apply color only to specific radio button if user has selected right or wrong options thanks in advance

如果用户提前选择了正确或错误的选项，有人可以告诉我如何仅将颜色应用于特定的单选按钮

2 个解决方案

#1

This is easily solvable in a number of ways.

这很容易通过多种方式解决。

I'd start by checking out ngstyle and ngclass.

我首先检查ngstyle和ngclass。

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

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

Even basic selectors, like querySelectorAll, would do the job of obtaining the desired elements and altering the style of those elements. JQuery can do it too.

甚至像querySelectorAll这样的基本选择器也可以完成获取所需元素和改变这些元素样式的工作。 JQuery也可以做到。

I'd explore them all, because you should understand how all work (you may not always work with Angular, and all of the above are commonly encountered). But if you're using Angular, ngstyle and ngclass are definitely things you should have in your holster.

我会全部探索它们，因为你应该理解所有的工作方式（你可能并不总是使用Angular，而且所有这些都是常见的）。但是如果你正在使用Angular，那么ngstyle和ngclass肯定是你皮套中应该有的东西。

Note that I see you say "Angular" but the tag is "AngularJS". Doesn't really matter, whichever framework you're actually using, ngclass and ngstyle exist and should be something you know.

请注意，我看到你说“Angular”，但标签是“AngularJS”。无论真正重要，无论你实际使用哪种框架，ngclass和ngstyle都存在，应该是你所知道的。

#2

First Way : You can modify your radoi button by modifying css with respect to checked or not!....

第一种方式：你可以修改你的radoi按钮修改css与被检查或不！！....

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;
}

and you use checked information

并使用检查信息

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

Second Way can be using ng-class like as;

第二种方式可以使用ng-class，如;

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

Third Way can be using ng-class like as;

第三种方式可以使用ng-class，如;

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

#1