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

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

我首先查看ngstyle和ngclass。

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

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

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

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

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

Answer 2

第一种方式：您可以通过修改关于已检查的css来修改您的radoi按钮！....

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

并使用检查信息

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

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

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

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

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

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

2 个答案: