AngularJS: Radio buttons in ng-repeat

Question

I've got a set of radio buttons in a ng-repeat, following what I found in this answer. I just can't figure out how to add an ng-model to it.

   <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>

With this controller:

(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',
      }
    ];
  });
})();

and, in my route, for this view:

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

The radio group correctly shows the second radio selected. But how do I update the model? What, exactly is the model? I have tried ng-model="selectservice.selectedService" which should be 0, but then no radio is selected.

Refer - docs.angularjs.org/api/ng/input/input%5Bradio%5D .. You basically need to give same ng-model for each radio button — Aditya Bhave
– Aditya Bhave, Commented Feb 6, 2020 at 14:07
In my case it's in a repeat so all of them will have the same ng-model. I have tried service.name, service.selected, nothing works. — Steve
– Steve, Commented Feb 6, 2020 at 14:14
Radio buttons are always a part of a group and only one of that group can be selected. That means a group of radio buttons will have only one value and therefore you need same ng-model for all radio buttons related to a group. — lifetimeLearner007
– lifetimeLearner007, Commented Feb 6, 2020 at 14:15
@Steve Can you please check if you have assigned ng-model. I do not see that in your html — Aditya Bhave
– Aditya Bhave, Commented Feb 6, 2020 at 14:21
I wound up using code from the deleted answer: <input type="radio" ng-model="service.selected" name="serviceSelections" id="service{{service.name}}"> — Steve
– Steve, Commented Feb 6, 2020 at 14:38

Risalat Zaman · Accepted Answer · 2020-02-06 14:38:47Z

0

You need to have a model in your controller to assign the radio button group an ng-model. In your case it should be

    _this.selectedService = "";

Since it appears that you want to get the selected service's name.

Setting your HTML like below will make it work.

<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>

After this whatever button you check, your _this.selectedService will update with the corresponding button's name. So if you select the "Deliv" radio button, your _this.selectedService will get the value "Deliv". I hope found your answer

edited Feb 6, 2020 at 14:38

answered Feb 6, 2020 at 14:15

Risalat Zaman

1,3871 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: Radio buttons in ng-repeat

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related