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为true，如果是，请将名为myClass的对象设置为包含样式的范围。此对象绑定到您的标记：

<div ng-class="myClass">

Answer 2

您可以使用ng-class指令。可以找到文档here。

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

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

<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指令中。

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

3 个答案:

发生了什么