Angular Radio button not working with model

Question

I have spent a lot of time trying out the solutions I found on SO but nothing seems to work for me. I created the jsfiddle based on a solution I found on SO below ...but still doesn't work.

There are a few issues: 1) a default for selected radio doesn't work 2) when selecting a radio button it doesn't update the model but appears to wipe it out

Please have a look at my fiddle and let me know if I have done something totally stupid. https://jsfiddle.net/findjon/z99dp7nq/

index.html

<div class="radio" data-ng-repeat="option in pudoOptions">
   <input type="radio" data-ng-model="selected.deliveryType" data-ng-value="deliveryType" />{{ option.name }}
</div>
{{ selected.deliveryType }}

controller

$scope.pudoOptions = [{name:'standard'},{name:'nextDay'}];
$scope.selected = {
  deliveryType : $scope.pudoOptions[0]
};

Indhu · Accepted Answer · 2017-02-08 12:51:12Z

2

Seems your code need some changes.

<div ng-app="testApp" ng-controller="testController">

    <div class="radio" ng-repeat="option in pudoOptions">
      <input type="radio" ng-model="selected.deliveryType" value="{{option.name}}" name="deliverType"/>
      {{ option.name }}
    </div>

    {{ selected.deliveryType }}
</div>

In controller.js:

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

app.controller('testController', ['$scope', function($scope) {

  $scope.pudoOptions = [{name:'standard'},{name:'nextDay'}];

  $scope.selected = {
    deliveryType : $scope.pudoOptions[0].name
  };

}]);

Its working for me.

answered Feb 8, 2017 at 12:51

Indhu

3991 gold badge6 silver badges19 bronze badges

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

Comments

Dinesh · Accepted Answer · 2017-02-08 12:53:22Z

0

try this

<div ng-app="testApp" ng-controller="testController">

    <div class="radio" ng-repeat="option in pudoOptions">
      <input name ="rname" type="radio" ng-model="selected.deliveryType" ng-value="option" />
      {{ option.name }}
    </div>

    {{ selected.deliveryType }}
</div>

answered Feb 8, 2017 at 12:53

Dinesh

3441 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular Radio button not working with model

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related