Can't set default selected radio button's option using ng-repeat in Angular.js

Question

This is my code:

    <label ng-repeat="option in product.DeliveryOptions" class="radio-inline product__filtr__form__label__input">
  <input type="radio" ng-model="product.SelectedDeliveryOption" ng-change="changeDeliveryType(product)" name="inlineRadioOptions{{product.ID}}"
class="product__filtr__form__radio" value="{{option.Method}}">{{option.Description}}
</label>

This is nested ng-repeat block. Parent block is product in products. As you can see each product has SelectedDeliveryOption. For example I have two radio buttons. Values(option.Method) - "bronze" for the first and "silver" for the second. This value (ng-model="product.SelectedDeliveryOption") is "silver". But radio button isn't selected by default. I've tryed: ng-checked = "option.Method == product.SelectedDeliveryOption", but doesn't work for me.

 $scope.initProductsTable = function (products) {
            $scope.products = products;    }

Could anyone help me?

Just initialization of products $scope.initProducts = function(products){$scope.products = products}; and <div ng-init="initProducts(products)"></div> — Alex Gurskiy
– Alex Gurskiy, Commented Aug 14, 2016 at 21:00

Alvaro Silvino · Accepted Answer · 2016-08-14 21:47:04Z

1

Make sure if the value object option.Method in:

<input type="radio" ng-model="product.SelectedDeliveryOption" ng-change="changeDeliveryType(product)" name="inlineRadioOptions{{product.ID}}"
class="product__filtr__form__radio" value="{{option.Method}}">

has the format:

option.Method = {"id": "12345",
            "value": "teste"}

and use ng-value directive;

like the example bellow:

When using radio button you have to make equal the model value and the value from the radio button:

check the snippet bellow:

(function(angular) {
  'use strict';
  angular.module('includeExample', ['ngAnimate'])
    .controller('ExampleController', ['$scope', '$q',
      function($scope, $q) {
       $scope.color = {
        name: 'blue'
      };
      $scope.specialValue = {
        "id": "12345",
        "value": "green"
      };        


      }
    ]);
})(window.angular);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>

<body ng-app="includeExample">
  <div ng-controller="ExampleController">
    <form novalidate class="simple-form">
    <label>
    <input type="radio" ng-model="color.name" value="red">
    Red
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" ng-value="specialValue">
    Green
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" value="blue">
    Blue
  </label><br/>
  <tt>color = {{color.name | json}}</tt><br/>
  </form> 

  </div>
</body>

edited Aug 14, 2016 at 21:47

answered Aug 14, 2016 at 21:20

Alvaro Silvino

9,83314 gold badges56 silver badges81 bronze badges

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

2 Comments

Alex Gurskiy Over a year ago

Alvaro, I've found a mistake. Thank you very much for help. The name of radio buttons was the same. Really, don't know how I missed it. Thanks a lot for your time.

Alvaro Silvino Over a year ago

Np, I'm happy if I helped :)

Collectives™ on Stack Overflow

Can't set default selected radio button's option using ng-repeat in Angular.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related