Angular：如何使用 ngRepeat 并设置默认单选按钮选项？答案

【问题标题】：Angular: How to use ngRepeat and set a default radio button option?Angular：如何使用 ngRepeat 并设置默认单选按钮选项？
【发布时间】：2015-03-24 23:22:59
【问题描述】：

我检查了this question，但这并不是很有帮助，因为他们使用 ng-repeat 的方式不同。

This 也没有帮助。

我有一个表格：

<label ng-repeat="option in options">
  <input type="radio" ng-model="myObject.value" ng-value="option.key">
</label>

我的角度控制器：

options = {
  key: 'Option 1'
  val: 'Value 1'
}
$scope.myObject = { value: 'default option' }

我想设置一个默认的单选选项。发生的事情是，无论我尝试什么，最后一个 option in list 都被设置为默认值。我确定我不明白为什么会这样，所以我在这里。

如何设置默认单选选项以及我当前的配置有什么问题？感谢您的帮助。

【问题讨论】：

angular js ng-repeat a radio button list from scope with a default checked的可能重复
@MarkoGrešak 谢谢，但我也不知道该示例中发生了什么，并且该解决方案不起作用。

标签： javascript angularjs forms

【解决方案1】：

如果要将myObject.value的值设置为输入的默认选项，则该键必须有一个选项。

演示：https://jsfiddle.net/2cb53pj3/

只需将$scope.myObject.value 设置为您的options 数组的键的匹配值

【讨论】：

这个例子似乎表明你所说的并不完全正确：docs.angularjs.org/api/ng/input/input%5Bradio%5D 这个例子显示了来自 3 个不同地方的选项。也许你能更好地解释你在说什么？
@Proto 在链接的示例中，输入与$scope.color.name 绑定，并且该变量的值为blue。因此，默认选择的输入是具有 blue 值的输入。在您的示例中，您的输入与$scope.myObject.value 绑定。因此，默认选择的输入将是匹配 $scope.myObject.value 值的输入。此外，您的输入中填充了 option.key 数组，因此这就是语句“如果要将 myObject.value 的值设置为输入的默认选项，则该键必须有一个选项”的原因。

【解决方案2】：

已经准备好了，但另一个答案在我之前提交。您需要设置myObject.value 以匹配您希望成为默认值的option.key。

Script.js

(function () {
angular.module('radioExample', [])
  .controller('ExampleController', ['$scope',
    function($scope) {

      $scope.options = [{
        'key': 'Option 1',
        'val': 'Value 1'
      }, {
        'key': 'Option 2',
        'val': 'Value 2'
      }, {
        'key': 'Option 3',
        'val': 'Value 3'
      }];

      $scope.myObject = {
        value: 'Option 2'
      };
    }
  ]);
})();

索引.html

<!DOCTYPE html>
<html ng-app="radioExample">

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="ExampleController">
  <form name="Options">
    <div ng-repeat="option in options">
      <label>{{option.key}}</label>
      <input type="radio" ng-model="myObject.value" ng-value="option.key">

    </div>
    Selected option is {{myObject.value}}
  </form>

</body>

</html>

【讨论】：

您还应该将数据格式化为数组而不是对象，以便 AngularJS 遍历它。