Question

我正在使用这种方法：

<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属性。

为什么会这样？我怎么称它为彩色？因为目前不工作..

Answer 1

您是此处范围继承问题的受害者。 Angular中有一条规则 - “始终在ng-model中使用点。ng-repeat创建一个新的子范围，并且在重复之外无法访问任何没有点的ng-model。请参阅{{ 3}}更深入的了解。

您似乎已经使用Controller As（您有vm绑定）。使用vm.color会有所帮助。

此外，一旦这些都正确地连接到控制器，它们将同时全部选择，因为您将所有值设置为相同的东西。您可以使用ng-value将无线电挂接到对象或对象上的属性。（例如。ng-value="topurchase"会将ng-model设置为特定对象，或ng-value="topurchase.name"将其设置为name属性。

总之，请更改ng-model以引用您的控制器，并使用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>

Nuances of scope prototype inheritance

angularjs收音机表现得很奇怪

1 个答案: