CODEWITHSUNDEEP
htmlangularjs
Yuko Pangestu
Yuko Pangestu

Reputation: 193

AngularJS How To Get the Data from Clicked Radio Button

I would like to ask about how to get the data from the ng-repeat. In the ng-repeat div I have put a radio button.

I would like to try how to get the data in a textbox from the ng-repeat that I have clicked,

// Code goes here
var app = angular.module('tesangular', []);
app.controller('tesCtrl', function($scope,$http){

  $scope.getCustomers = function(){
  $http.get('customer.json').success(function(data){
    $scope.customers = data;
  })
};

  $scope.getCustomers();
});
[{
	"name": "Karim",
	"Birth": "1\/1\/1980",
	"gender": "1",
	"address": "jalan jakarta",
	"city_code": "1",
	"phone": "0211111"
}, {
	"name": "aaa",
	"Birth": "1982-2-1981",
	"gender": "Pria",
	"address": "Periksa di Laboratorium",
	"city_code": "sfsd",
	"phone": "a"
}, {
	"name": "Ahmad",
	"Birth": "1\/1\/1982",
	"gender": "male",
	"address": "jalan jalan",
	"city_code": "100",
	"phone": "021111"
}, {
	"name": "aslam",
	"Birth": "1991-10-1983",
	"gender": "Pria",
	"address": "Periksa di Rumah (Home Service)",
	"city_code": "jalan jalan",
	"phone": "LabConX"
}, {
	"name": "Ahmad Karim",
	"Birth": "1991-10-1984",
	"gender": "Pria",
	"address": "Periksa di Laboratorium",
	"city_code": "jalan jalan",
	"phone": "LabConX"
}]
<!DOCTYPE html>
<html ng-app="tesangular">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <title>Tes Angular</title>
  </head>
  <body ng-controller="tesCtrl">
    <div ng-repeat="cust in customers">
      <input type="radio" name="name"><p ng-model="name">{{cust.name}}</p>
    </div>
    <input type="text" name="name" value="{{name}}">
    <label class="select">
      <select name="gender">
        <option value="" selected disabled>Tanggal</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
      <i></i>
    </label>
    <label class="select">
    <select name="gender">
      <option value="" selected disabled>Bulan</option>
    	<option value="0">Januari</option>
    	<option value="1">Februari</option>
    	<option value="2">Maret</option>
    	<option value="3">April</option>
      <option value="4">Mei</option>
      <option value="5">Juni</option>
      <option value="6">Juli</option>
      <option value="7">Agustus</option>
      <option value="8">September</option>
      <option value="9">Oktober</option>
      <option value="10">November</option>
      <option value=11>Desember</option>
    </select>
    <i></i>
    </label>
    <label class="select">
    <select name="gender">
      <option value="" selected disabled>Tahun</option>
    	<option value="0">1980</option>
    	<option value="1">1981</option>
    	<option value="2">1982</option>
    	<option value="3">1983</option>
    </select>
    <i></i>
    </label>
  </body>
</html>

https://plnkr.co/edit/ckUOKkUc9VXapi201Z9U?p=preview

So that is the example that I have made, in the example there is a ng-repeat with radiobutton on it and I would like to get the data from the value that I have clicked and it goes to the textbox below it. Also, I would like to get the number data from the json about birth date, and when the value is clicked, the data about date goes to the select tag in the HTML...

Thank you for the answers

Upvotes: 0

Views: 1532

Answers (3)

Mervyn
Mervyn

Reputation: 583

var app = angular.module('tesangular', []);
app.controller('tesCtrl', function($scope,$http){

  $scope.getCustomers = function(){
    $scope.customers = [{
	"name": "Karim",
	"Birth": "1\/1\/1980",
	"gender": "1",
	"address": "jalan jakarta",
	"city_code": "1",
	"phone": "0211111"
}, {
	"name": "aaa",
	"Birth": "1982-2-1981",
	"gender": "Pria",
	"address": "Periksa di Laboratorium",
	"city_code": "sfsd",
	"phone": "a"
}, {
	"name": "Ahmad",
	"Birth": "1\/1\/1982",
	"gender": "male",
	"address": "jalan jalan",
	"city_code": "100",
	"phone": "021111"
}, {
	"name": "aslam",
	"Birth": "1991-10-1983",
	"gender": "Pria",
	"address": "Periksa di Rumah (Home Service)",
	"city_code": "jalan jalan",
	"phone": "LabConX"
}, {
	"name": "Ahmad Karim",
	"Birth": "1991-10-1984",
	"gender": "Pria",
	"address": "Periksa di Laboratorium",
	"city_code": "jalan jalan",
	"phone": "LabConX"
}]

};

  $scope.getCustomers();
});
<!DOCTYPE html>
<html ng-app="tesangular">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <title>Tes Angular</title>
  </head>
  <body ng-controller="tesCtrl">
    <div ng-repeat="cust in customers">
      <input type="radio" name="name" value="{{cust.name}}" ng-model="$parent.name" />{{cust.name}}
    </div>
    {{name}}
  </body>
  
</html>

Because ng-repeat will create a new scope, so must use $parant bind ng-model.

Upvotes: 0

spaniard
spaniard

Reputation: 560

You need to add a ng-model to your input, so when the radio button is clicked then you get the variable of the one selected in a variable. 

 <div ng-repeat="cust in customers" >
      <input type="radio" name="name" ng-value="cust" ng-model="customerSelected">{{ cust.name }}
 </div>

Which should put the cust value of the radio button clicked in the customerSelected variable. Then in the input you can put:

<input type="text" name="name" value="{{customerSelected.customerName}}">

Then on the select created them as:

<select ng-model="customerSelected.birth">

and it will select the option on the radio button which 'value' attribute matches the customerSelected.birth parameter.

It could be good if you define customerSelected on your script.js as:

$scope.customerSelected=null;

or 

$scope.customerSelected=[];

You can take a look to the AngularJs documentation about select/radio button.

Upvotes: 0

JB Nizet
JB Nizet

Reputation: 691715

An ng-model on a pdoesn't make sense. The ng-model needs to be on the input:

in the JS:

$scope.selection = {};

in the HTML:

<div ng-repeat="cust in customers">
  <label><input type="radio" name="name" value="{{ cust.name }}" ng-model="selection.customerName">{{cust.name}}</label>
</div>
<input type="text" name="name" value="{{selection.customerName}}">

Or, if you want the whole customer to be stored in the selection rather than just its name:

<div ng-repeat="cust in customers">
  <label><input type="radio" name="name" ng-value="cust" ng-model="selection.customer">{{cust.name}}</label>
</div>
<input type="text" name="name" value="{{selection.customer.name}}">

Upvotes: 1

Related Questions