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

-1

我检查了this question，但它不是非常有用，因为他们使用ng-repeat的方式不同。Angular：如何使用ngRepeat并设置默认单选按钮选项？

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被设置为默认值，不管我尝试什么。我确信我不明白这是为什么，所以我在这里。

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

来源

2015-03-24 Proto

的[角JS NG-重复一个单选按钮从列表范围与默认选中]（可能重复的http：//计算器。 com/questions/25389701/angular-js-ng-repeat-a-radio-button-list-scope-with-a-default-checked） – 2015-03-24 23:25:16

@MarkoGrešak谢谢，但我不知道那个例子是怎么回事无论是和解决方案不工作。 – Proto 2015-03-24 23:34:12

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

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

刚刚成立$scope.myObject.value与options阵列

来源

2015-03-24 23:52:33

这个例子似乎表明你说的不完全正确：https://docs.angularjs.org/api/ng/input/input%5Bradio%5D这个例子显示来自3个不同地方的选项。也许你可以更好地解释你在说什么？ – Proto 2015-03-25 00:06:24

@Proto在链接示例中，输入与'$ scope.color.name'绑定，该变量的值为** blue **。因此，默认选择的输入是具有** blue **值的输入。在你的例子中，你的输入与'$ scope.myObject.value'绑定。因此，默认选择的输入将是匹配'$ scope.myObject.value'值的那个。此外，你的输入被一个'option.key'数组填充，所以这就是语句的原因：“如果你想将'myObject.value'的值设置为输入的默认选项，那么必须有一个选项那把钥匙。“ – 2015-03-25 15:45:16

有了这个准备的键的匹配值，但对方的回答是我前递交。您需要设置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="[email protected]*" 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>

来源

2015-03-25 00:42:56 steveo

您还应该将数据格式化为数组而不是对象，以便AngularJS遍历它。 – steveo 2015-03-25 00:44:32

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

回答

相关问题