Question

我已经构建了一个关于电视节目的webapp作为学习AngularJS的练习。但是，我现在需要的是根据选中的单选按钮来更改类。

这是观点：

<div id="image" class="no-selection"></div>

<div ng-class="{ {{ show.name }}:'col-md-12 chosen', !{{ show.name }}:'col-md-12' }[tvshow.chosen]"  ng-repeat="show in shows"

        <input type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">

</div>

<tt>TV Show = {{tvshow.chosen | json}}</tt><br/>

如何从这里更改#image

的班级

Answer 1

你累了ng-class吗？

class="{{tvshow.chosen}}" 
ng-class="{useThis: true, dontUse: returnFalse()}"
ng-class="['this', 'and', 'that']"

Answer 2

您可以将ng-class指令用作<div id="image" ng-class="{classname : tvshow.chosen, classname : !tvshow.chosen}"></div>，她可以获取更多信息的文档https://docs.angularjs.org/api/ng/directive/ngClass

Answer 3

您可以使用ng-class：

<body ng-controller="MainCtrl">
        <p>Hello {{name}}!</p>
        <div id="image" ng-class="{show1:'show1class', show2:'show2class', false:'no-selection'}[tvshow.chosen]">
          {{tvshow.chosen}}
        </div>

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

http://plnkr.co/edit/wYqNvesYSJTEol4eHv0L?p=preview

在Angular中基于单选按钮更改类

3 个答案: