Shane
Shane

Reputation: 5687

ng-model not selecting the radio button

I have an input type radio inside a ng-repeat. The entire div is loaded in a popup, so i am accessing the controller property via parentScope.

<div ng-repeat="name in parentScope.PatientInfo">
      <input type="radio" id="select-radio-{{$index}}" ng-class="{'radio-btn':true, 'newpaymentmethod1' : true}" 
        ng-model="parentScope.nameObject"  name="object">
</div>

I am getting the value for parentScope.PatientInfo, but my input type radio is not getting selected by default or on click either. I tried giving value and ng-value to my input type radio, but all in vain.

Upvotes: 0

Views: 510

Answers (1)

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8188

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {

  $scope.selected = {
    "name": "",
    "zipCode": "",
    "addressType": "",
    "message": ""
  };
  $scope.items = [{
    "name": "newyork",
    "zipCode": "80166",
    "addressType": "shipToHome",
    "message": "test"
  }, {
    "name": "toronto",
    "zipCode": "80166",
    "addressType": "shipToHome",
    "message": "test"
  }, {
    "name": "california",
    "zipCode": "80166",
    "addressType": "shipToHome",
    "message": "test"
  }];
  $scope.MessageDelivery = function(name) {
    $scope.selected.message = "Will be Delivered to " + name;

  };
  $scope.getItems = function() {
    return $scope.items;
  };

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

<div ng-app="myApp">
  <div ng-controller="myController">
    <div>Which one?</div>
    <label class="radio" ng-repeat="item in getItems()">
          <input type="radio" ng-model="selected.name" name="itemOptions" ng-change="MessageDelivery(item.name)" value="{{item.name}}">{{item.name}} - {{item.zipCode}} - {{item.addressType}}
        </label>
    <hr />
    <div>You picked: {{selected.name}} - {{selected.message}} </div>
  </div>
</div>

Upvotes: 2

Related Questions