Question

除了选择我有单选按钮的选项外，我的情况与here完全相同。

HTML

<body ng-app="switchExample">
    <div ng-controller="ExampleController">
    <div>
        <input type="radio" ng-model="selection" name="field1" value="field1"></input>
    </div>
    <div>
        <input type="radio" ng-model="selection" name="field2" value="field2"></input>
    </div>
    <div>
        <input type="radio" ng-model="selection" name="field3" value="field3"></input>
    </div>
    <code>selection={{selection}}</code>
<hr/>
<div class="animate-switch-container"
ng-switch on="selection">
  <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
  <div class="animate-switch" ng-switch-when="home">Home Span</div>
  <div class="animate-switch" ng-switch-default>default</div>
</div>
</div>
</body>

角：

(function(angular) {
'use strict';
angular.module('switchExample', ['ngAnimate'])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.selection = 'field1';
 }]);
})(window.angular);

目标：

我正在努力设置div元素缠绕在单选按钮上的类，因为单选按钮具有opacity:0，我必须使用div元素。

设置ng-class="{checked: selection == 'selection'}"会为所有选择选项提供课程，这是我不想要的。

Answer 1

尝试ng-class：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .class-if-selected {
        font-size: 21pt;
      }
      .class-ifnot-selected {
        color: blue;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="ctrl.js"></script>
  </head>
  <body>
    <div ng-app="app" ng-controller="myCtrl">
      <form>
        <input type="radio" ng-model="selection" name="field1" value="field1" />
        <span ng-class="(selection == 'field1' ? 'class-if-selected' : 'class-ifnot-selected')">One</span>
        <input type="radio" ng-model="selection" name="field2" value="field2" />
        <span ng-class="(selection == 'field2' ? 'class-if-selected' : 'class-ifnot-selected')">Two</span>
        <input type="radio" ng-model="selection" name="field3" value="field3" />
        <span ng-class="(selection == 'field3' ? 'class-if-selected' : 'class-ifnot-selected')">Three</span>
      </form>
    </div>
  </body>
</html>

本规范中包含两项强烈建议

1：输入标签是自动关闭的

<input />制作有效的HTML，<input></input>将导致您遇到问题

2：使用复选框或丢失div

如果您打算一次选择多个单选按钮，请使用复选框。用户更熟悉选择多个复选框，而他们通常期望只有一个选项带有单选按钮。如果你丢失div并在所有这些标签周围替换一个表格标签，你可以获得相同的结果，页面看起来会相同，但一次只能选择一个单选按钮。

在选定的单选按钮上设置班级

1 个答案:

本规范中包含两项强烈建议

1：输入标签是自动关闭的

2：使用复选框或丢失div