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, но тогда выбрано no radio.

Answer 1

В вашем контроллере должна быть модель, чтобы назначить группе переключателей ng-модель. В вашем случае это должно быть

    _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». Я надеюсь нашел ваш ответ