Angular：正确显示最初选择的单选按钮

12 浏览
0 Comments

Angular：正确显示最初选择的单选按钮

我有以下 Plunker：http://plnkr.co/edit/5mfYvsko2cW1SS66CqJC?p=preview。当它最初加载时，选中的值将为 [true]，但相应的单选按钮不会被选中。如果我取消注释以下行：\n$scope.selected = $scope.items[1].value;\n那么正确的单选按钮将显示出来。我知道这是由于 Javascript 如何处理数组的等式比较的结果。不幸的是，在我的实际情况中，我找不到任何合理的方法来确保我赋予的是相同的对象。是否有其他方法可以在初始加载时确保正确的单选按钮显示为选中状态？

0

2 答案

0 Comments

问题出现的原因是在Angular中无法直接正确显示初始选择的单选按钮。解决方法之一是使用以下代码：

$scope.selected = {value: [true], name: 'True'};
$timeout(function () {
  $('input[type="radio"]').each(function () {
    if ($scope.selected.value.toString() === this.value) {
      this.checked = true;
    }
  });
});

此外，还可以使用这个答案中提到的方法作为替代方案。这个方法中的plunker不需要像初始情况下的$scope.selectedOption.value那样作为字符串。

0
0 Comments

问题的出现原因是初始选中的radio按钮无法正确显示。这是因为在Angular中，ng-model指令用于绑定数据到表单元素上，但是当ng-model绑定到一个radio按钮组时，初始值无法正确显示。

解决方法是使用ng-init指令来设置初始值。在给ng-repeat创建radio按钮组时，通过ng-init将初始值设置为true。这样就可以正确显示初始选中的radio按钮。

具体的解决方法如下所示：

$scope.items = [
  {value: 'false', name: 'False'},
  {value: 'true', name: 'True'},
  {value: 'neither', name: 'False or true'}
];

以上是解决问题的完整代码，你可以在plunker中查看实际效果。

0