CODEWITHSUNDEEP
angularjsradio-buttonangularjs-ng-repeat
Ege Bayrak
Ege Bayrak

Reputation: 1199

getting value of inputs created by ng-repeat

I created a radiobutton input but struggling to get the values of selected inputs.

this is the radiobuttons input I created

<ul ng-repeat="item in riskModel">
    <li>
      <input type="radio" name="rdbRisk" ng-value="{{item.value}}" />
      {{item.text}}
    </li>
</ul>

and this the ng-model definiton in controller

$scope.riskModel = [
        { id: 0, text: "A", value: "" },
        { id: 1, text: "B Risk", value: "YR" },
        { id: 2, text: "C Risk", value: "OR" },
        {id:3,text:"D Risk",value:"DR"}
    ]

I want to take the selected value and send it to a function as a parameter but so far I failed to get any results.

Upvotes: 0

Views: 1104

Answers (4)

Mohit Tanwani
Mohit Tanwani

Reputation: 6638

Declare your ng-model variable as object $scope.radioModel = {};

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

myApp.controller('GreetingController', ['$scope', function($scope) {
  //$scope.radioModel = {};
  $scope.riskModel = [
        { id: 0, text: "A", value: "" },
        { id: 1, text: "B Risk", value: "YR" },
        { id: 2, text: "C Risk", value: "OR" },
        {id:3,text:"D Risk",value:"DR"}
    ]
  $scope.changeValue = function(value){
    console.log(value.selected);
  }
  
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="GreetingController" ng-init="radioModel={}">
    Get selected value : {{radioModel.selected}}
  <ul ng-repeat="item in riskModel">
    <li>
      <input type="radio" ng-model="radioModel.selected" name="rdbRisk" ng-value="item.value" ng-change="changeValue(radioModel)"/>
      {{item.text}}
    </li>
</ul>
</div>
</body>

Upvotes: 1

Nix
Nix

Reputation: 58602

Fiddle that shows your working example:

On your input, add a ng-model which will be where you want to save your selection, and remove the surrounding {{}} on {{item.value}}.

<li>
  <input type="radio" 
        ng-model="mySelection.selected" 
        name="rdbRisk"
        ng-value="item.value" />
  {{item.text}}
</li>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222722

Dont use expression {{}} in an input ,

<input type="radio" name="rdbRisk" ng-value="item.value" />

DEMO

best option is to use ng-model and get the selected value,

  <input type="radio" ng-model="selected" name="rdbRisk"     ng-click="display(selected)" />

DEMO

Upvotes: 1

taguenizy
taguenizy

Reputation: 2265

You forgot ng-model

<input type="radio" ng-model="selectedValue" name="rdbRisk" ng-value="item.value" />

Access in controller with $scope.selectedValue

Upvotes: 1

Related Questions