angularjs - Angularjs - 如何使用单选按钮更改背景颜色

Question

在我的页面上，我动态创建了单选按钮。我想在选择单选按钮时更改包装器背景颜色。

以下是我的代码

<section ng-repeat="list in myList">
  <div class="radioWrapper">
    <input type="radio" name="{{list.category}}" ng-model="list.name">
    <label>{{list.name}} </label>
   </div>
</section>

当每个收音机被选中时，我想在 radioWrapper 中添加“selectedRadioBg”类。

感谢任何帮助

Answer 1

<section ng-repeat="list in myList">
  <div ng-class="myClass">
    <input type="radio" name="{{list.category}}" ng-model="list.name">
    <label>{{list.name}} </label>
   </div>
</section>

// in controller/link

if($scope.list.name){
  $scope.myClass = {background: #B250C2};
}

参见：ngClass

发生了什么

您的单选按钮上有一个 ngModel list.name。如果收音机被选中，它的值评估为true

您观察 $scope.list.name 是否为真，如果是，则设置一个名为myClass您的范围的对象，其中包含样式。此对象绑定到您的标记：

<div ng-class="myClass">

Answer 2

您可以使用该ng-class指令。文档可以在这里找到。

该指令允许您根据表达式有条件地应用类，在本例中为单选按钮选择。

因此，使用您的示例，您可以使用以下代码：

<div class="radioWrapper" ng-class="{'selectedRadioBg': list.name}>
    <input type="radio" name="{{list.category}}" ng-model="list.name">
    <label>{{list.name}} </label>
</div>

list.name在这里充当真/假表达。

Answer 3

<section ng-repeat="list in myList">
    <div class="radioWrapper" ng-class="{'selectedRadioBg': list.name}>
        <input type="radio" name="{{list.category}}" ng-model="list.name">
        <label>{{list.name}} </label>
    </div>
</section>

用。。。来代替

<section ng-repeat="list in myList">
    <div class="radioWrapper" style="background: {{list.name}} none repeat scroll 0% 0%;">
        <input type="radio" name="{{list.category}}" ng-model="list.model">
        <label>{{list.name}} </label>
    </div>
</section>

**不要将您的 list.name 放在 ng-model 指令中。