Question

我有以下观点。我想要的是根据是否检查其中的单选按钮来更改div的类。我究竟做错了什么？注意：我是AngularJS的新手，这个项目是我试图学习Angular ..

<div class="col-use-select" ng-repeat="show in shows" ng-class="{show[name]:'test'}[tvshow.chosen]">
    <input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
    <label for="{{show.name}}">{{show.name}}</label>
</div>

Answer 1

您正在将ng-class应用于ng-repeat的div，因此将其分配给所有div。您需要创建一个子div，根据您的条件将ng-class添加到该div。它将切换只有那个子div的类

<div class="col-use-select" ng-repeat="show in shows">
   <div  ng-class="test:tvshow.chosen">
       <input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">

    <label for="{{show.name}}">{{show.name}}</label>
   </div>
</div>

Answer 2

我从问题中得到的是你想要改变特定单选按钮选择的类。在有条件的基础上以角度分配类时，您显示的html标记不是有效的。

请在下面找到一个会在选项选择中更改div的css类，然后根据备用选择选择另一个类

<div ng-app ng-controller="test">
    <div class="col-use-select" ng-repeat="show in shows" ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}">
        <input id="{{show.name}}" type="radio" name="checkbox" ng-model="$parent.tvshowChosen" ng-value="show.name">
        <label for="{{show.name}}">{{show.name}}</label>
    </div>
</div>

在此示例中，行：

ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}"

表示如果tvshowChosen值为abc，则将应用测试类，或者在第二种情况下将应用test2。

这一行：

ng-model="$parent.tvshowChosen"

这里使用$ parent作为ng-repeat创建自己的隔离范围。因此$ parent将定位父作用域而不是单独的隔离作用域，以便选择可以是有效作用。

Working Fiddle

根据里面的单选按钮更改div类？

2 个答案: