Question

将ng-model添加到单选按钮组似乎会改变选项时哪些输入会被聚焦。使用IE11（11.842.10586.0）和Angular 1.6.3进行测试（尽管它也出现在早期版本的Angular中）。

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    <input type="text" ng-model="firstname">
    <br/>
    <input type="radio" value="1" name="radioExample" checked> 
    <input type="radio" value="2" name="radioExample"> 
    <input type="radio" value="3" name="radioExample">
    <br/>
    <input type="text" ng-model="firstname">

  </form>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "";
    $scope.radioValue = "1";
});
</script>

</body>
</html>

http://plnkr.co/edit/nwo7sljK4NIEr66T6q7w

这显示了正常行为。如果选择了单选按钮，则对单选按钮组的选项卡将对焦于所选的单选按钮。如果没有选择单选按钮，则向前选项卡将重点放在第一个元素上，后退标签将重点放在最后一个元素上。

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    <input type="text" ng-model="firstname">
    <br/>
    <input type="radio" value="1" ng-model="radioValue" name="radioExample"> 
    <input type="radio" value="2" ng-model="radioValue" name="radioExample"> 
    <input type="radio" value="3" ng-model="radioValue" name="radioExample">
    <br/>
    <input type="text" ng-model="firstname">

  </form>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "";
    $scope.radioValue = "1";
});
</script>

</body>
</html>

http://plnkr.co/edit/vMlG7RUg2Kd0sZLmr0lb

这显示添加ng-model时的修改行为。无论是否选择了单选按钮，向前的选项卡都会聚焦在第一个元素上，而向后的选项卡则会聚焦于最后一个元素。即使手动选择了不同的单选按钮，此行为仍然存在。

我尝试过使用各种检查/ ng-checked组合，使用$ timeout延迟模型初始化，并使用<fieldset>。

是什么导致了这一点，更重要的是有一种方法可以让第二个场景表现得像第一个场景（在选项卡时关注选定的单选按钮）？

Answer 1

我在plnkr上分叉你的“修改行为”示例，并将checked属性添加到第一个单选按钮。然后，Tabbing的行为与“正常行为”示例中的行为完全相同。

<input type="radio" value="1" ng-model="radioValue" name="radioExample" checked> 
<input type="radio" value="2" ng-model="radioValue" name="radioExample"> 
<input type="radio" value="3" ng-model="radioValue" name="radioExample">

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

要协调模型与“已检查”属性之间的任何差异，您可以在模型值更改时添加/删除属性。

Answer 2

尝试使用ng-value。 $scope.radioValue = "1";数据类型是字符串更改为$scope.radioValue = 1;

＆＃13;

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "";
    $scope.radioValue = 1;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    <input type="text" ng-model="firstname">
    <br/>
    <input type="radio" data-ng-model="radioValue" data-ng-value="1" name="radioExample"> 
    <input type="radio" data-ng-model="radioValue" data-ng-value="2" name="radioExample"> 
    <input type="radio" data-ng-model="radioValue" data-ng-value="3" name="radioExample">
    <br/>
    <input type="text" ng-model="firstname">
    
  </form>
</div>
</body>

＆＃13;

在IE11中受ng-model影响的单选按钮的制表符/焦点行为

2 个答案: