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 = "";

由于您似乎想要获取所选服务的名称。

像下面这样设置您的 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 将更新为相应按钮的名称。 因此，如果您选择“Deliv”单选按钮，您的 _this.selectedService 将获得值“Deliv”。 我希望找到你的答案