Angular:如何使用ngRepeat并设置默认单选按钮选项

Angular: How to use ngRepeat and set a default radio button option?

本文关键字：设置 默认 单选按钮 选项 ngRepeat 何使用 Angular      更新时间：2023-09-26

我检查了这个问题，但没有太大帮助，因为他们使用ng repeat的方式不同。

这也没有帮助。

我有一张表格：

<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都被设置为默认值。我肯定不明白为什么，所以我来了。

我如何设置默认的收音机选项？我当前的配置有什么问题？谢谢你的帮助。

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

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

只需使用options数组的键的匹配值设置$scope.myObject.value

已经准备好了，但另一个答案是在我之前提交的。您需要将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'
      };
    }
  ]);
})();

Index.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>
相关文章：