AngularJS: ng-repeat 中的单选按钮

Question

根据我在中找到的内容，我在 ng-repeat 中得到了一组单选按钮。我只是不知道如何向它添加 ng-model。

   <tr ng-repeat="service in selectservice.services track by $index">
          <td>
            <input type="radio" name="serviceSelections" ng-value="{{service.name}}" id="service{{service.name}}">
          </td>
          <td>
            <h3>
              {{service.name}}
            </h3>
            <p>{{service.caption}}</p>
          </td>
        </tr>

使用此控制器：

(function() {
  'use strict';

  angular.module('pb.ds.selectservice').controller('SelectServiceController', function($log) {
    var _this = this;

    _this.selectedService = 0;

    _this.services = [
      {
        selected: false,
        name: 'Postmates',
        caption: 'Guaranteed delivery within time'
      },
      {
        selected: true,
        name: 'Deliv',
        caption: 'Guaranteed delivery within time',
      },
      {
        selected: false,
        name: 'Roadie',
        caption: 'Guaranteed delivery within time',
      }
    ];
  });
})();

并且，在我的路线中，对于此视图：

        content: {
          controller: 'SelectServiceController as selectservice',
          templateUrl: 'modules/select-service/templates/select-service.html'
        },

收音机组正确显示了所选的第二个收音机。但是我该如何更新模型呢？什么，是模型？我试过 ng-model="selectservice.selectedService" 应该是 0，但是没有无线电被选中。

Answer 1

您需要在控制器中有一个模型才能为单选按钮组分配一个 ng-model。在你的情况下应该是

    _this.selectedService = "";

因为您似乎想要获取 selected 服务的名称。

设置您的 HTML 如下所示将使其工作。

<tr ng-repeat="service in selectservice.services track by $index">
          <td>
            <input type="radio" ng-model="selectservice.selectedService" value="{{service.name}}" id="service{{service.name}}">
          </td>
          <td>
              {{service.name}}
            <p>{{service.caption}}</p>
          </td>
      </tr>

在您选中任何按钮之后，您的 _this.selectedService 将更新为相应按钮的名称。因此，如果您 select "Deliv" 单选按钮，您的 _this.selectedService 将获得值 "Deliv"。我希望找到你的答案

AngularJS: ng-repeat 中的单选按钮

AngularJS: Radio buttons in ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model