Javascript 基于角视图中的单选按钮更改类_Javascript_Angularjs

Javascript 基于角视图中的单选按钮更改类

javascript angularjs

Javascript 基于角视图中的单选按钮更改类,javascript,angularjs,Javascript,Angularjs,我已经建立了一个关于电视节目的网络应用程序，作为学习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 i

我已经建立了一个关于电视节目的网络应用程序，作为学习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/>

我如何从这里开始改变图像的类别

你累了吗

您可以使用ng类指令，如需更多信息，请参阅文档。

您可以使用ng类：

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

但是它不应该被命名为电视节目的名字。如果选中了关联的单选按钮，它应该只更改为类SomethingSelected。但不应该将其命名为tvshow名称。如果选中了关联的单选按钮，它应该只更改为class SomethingSelected。当您选中绑定到ng modle的单选按钮时，那么ng class={SomethingSelected:ng modlevariable}因此，因为我希望为每个单选按钮将类分配给关联的div，所以我使用了您的想法，并将其转换为：不起作用，尽管：@User183849481我更新了plunker版本。您可以在控制器中构建自己的表达式对象。

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