Angular setting default radio selection in ng-repeat

Question

I am presenting a simple yes/no answer question to my users and I want to have a default radio button selected. The problem is that I could have any number of these questions presented to the user.

This is my code:

<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]">  
     <div data-ng-repeat="option in closeListingOptions" class="radio">
          <label>
               <input type="radio" name="close" ng-model="i.close" value="{{option.id}}" ng-checked="option.checked" />{{option.name}}</strong>
          </label>
     </div>
</div>

My options are set as follows:

$scope.closeListingOptions = [
        {
            id: "1",
            name: "Yes please",
            checked: true
        },
        {
            id: "0",
            name: "No thanks",
            checked: false
        }     
];

The above example works and check/sets "yes" as the default answer. However unless I manually select an option via a mouse click the value is not binding to the model.

I have read that ng-select should not be used with ng-options but i am not sure how else I can achieve this goal? It seems that I need something like:

i.close = "1":

But how can I set this for an unknown quntity since I don't know how many question will be presented?

Saeed · Accepted Answer · 2018-09-11 08:04:49Z

1

1- Instead of value={{something}} you can use ng-value directive.

2- Each input pack should have its specific name.

Here is a working example:

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {

  $scope.offers = [{
      number: 1
    },
    {
      number: 2
    }
  ];


  $scope.closeListingOptions = [{
      id: "1",
      name: "Yes please",
      checked: true
    },
    {
      id: "0",
      name: "No thanks",
      checked: false
    }
  ];
});

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-form ng-repeat="i in offers" name="messageForm[$index]">
    <div data-ng-repeat="option in closeListingOptions" class="radio">
      <label>
               <input type="radio" name="close-{{i.number}}" ng-model="i.close" ng-value="option.id" ng-checked="option.checked" />{{option.name}}</strong>
          </label>
    </div>
    {{i}}
    <hr>
  </div>

</body>

</html>

edited Sep 11, 2018 at 8:04

answered Sep 11, 2018 at 5:24

Saeed

5,4983 gold badges30 silver badges43 bronze badges

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

8 Comments

Alan A Over a year ago

thank you but your solution doen't quite fit my use case since I don't access to the $scope.offers in order to manipulate it by adding the "close: 1" value

Saeed Over a year ago

What you mean I don't access to the $scope.offers? It is on client side and you can manipulate it. Also, your ng-model="i.close" says that each offers item has close key. has not? @AlanA

Alan A Over a year ago

It is client side but is called via an API which makes a call to a backend db. It would be a hack for me to inject data into the result of a mysql query. That is correct - the close key does not exist for each offer - my error

Saeed Over a year ago

So, is your ng-model="i.close" wrong? If your offers items don't have the close key, This binding will add that to item. I can't understand your problem! @AlanA

Alan A Over a year ago

The only reason I have i.close is so that in my controller I know what the 'close' response was to any given question. So if it adds the binding I guess htat is what I want

|

weirdpanda · Accepted Answer · 2018-09-11 05:10:59Z

0

You should try this:

<input type="radio" name="close" 
    ng-model="option.checked" value="{{option.id}}"
    ng-checked="option.checked" />{{option.name}}</strong>

This ng-model will updated the checked key of your data array and then you can fetch all the radio button selection as per their ids from that single variable.

Hope this helps.

edited Sep 11, 2018 at 5:10

weirdpanda

2,6461 gold badge22 silver badges33 bronze badges

answered Sep 11, 2018 at 5:01

Saket

8466 silver badges13 bronze badges

Comments

Alan A · Accepted Answer · 2018-09-11 22:21:39Z

0

I was able t achieve my goal with the following:

<div data-ng-repeat="option in closeListingOptions" class="radio" ng-init="i.closeListing = 1">
  <label>
    <input type="radio" name="close-{{i.id}}" ng-model="i.closeListing" ng-value="{{option.id}}" />
        <strong>{{option.name}}</strong>
    </label>
</div>

The solution was to use ng-init

answered Sep 11, 2018 at 22:21

Alan A

2,5516 gold badges34 silver badges55 bronze badges

Collectives™ on Stack Overflow

Angular setting default radio selection in ng-repeat

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related