CODEWITHSUNDEEP
angularjsmodelradio-button
user1806692
user1806692

Reputation: 143

Angular Radio button not working with model

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]
};

Upvotes: 0

Views: 378

Answers (2)

Dinesh
Dinesh

Reputation: 344

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>

Upvotes: 0

Indhu
Indhu

Reputation: 399

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.

Upvotes: 2

Related Questions