我正在使用这种方法:
<tr class="radio-row" ng-repeat="topurchase in vm.firmstopurchase">
<td >
<input type="radio" ng-model="color" value="red">
{{ topurchase.name }}</td>
</tr>
但在我的代码中，我可以以某种方式选择其中多个，并且它们有奇怪的名称:
在 ng-repeat 完成后查看源代码时，我看到:
<input type="radio" ng-model="color" value="red" class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" name="38" style="">
每个 ng-repeat 循环的所有不同的 name 属性。
为什么会这样？我怎样才能用颜色来调用它？因为目前无法工作..
最佳答案
您是这里范围继承问题的受害者。 Angular 中有一条规则 - “始终在 ng-model 中使用点。ng-repeat 创建一个新的子范围，并且任何没有点的 ng-model 在重复之外都无法访问。请参阅 Nuances of scope prototype inheritance 了解更深入的信息看看。
您似乎已经在使用 Controller As(您有 vm 绑定(bind))。使用vm.color会在这里提供帮助。
此外，一旦这些都正确连接到 Controller ，它们都会同时选择，因为您将它们的所有值设置为相同的值。您可以使用ng-value将 radio 连接到对象或对象的属性。 (例如，ng-value="topurchase" 会将 ng-model 设置为特定对象，或者 ng-value="topurchase.name" 将其设置为等于 name 属性。
总而言之，更改 ng-model引用您的 Controller ，并使用 ng-value而不是value .
var app = angular.module('plunker', []);
app.controller('MainCtrl', function() {
var vm = this;
vm.firmstopurchase = [
{name: 'red', number: 1},
{name: 'blue', number: 2},
{name: 'yellow', number: 3},
];
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<table>
<tr class="radio-row" ng-repeat="topurchase in vm.firmstopurchase">
<td>
<input type="radio" ng-model="vm.color" ng-value="topurchase"> {{ topurchase.name }}</td>
</tr>
</table>
{{vm.color}}
</body>
</html>关于javascript - AngularJS radio 表现得很奇怪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39549066/