2016-03-03 2 views
0

Я хотел бы спросить, как получить данные из ng-repeat. В div ng-repeat я установил переключатель.AngularJS Как получить данные с нажатой кнопки радиосвязи

Я хотел бы попробовать, как получить данные в текстовом поле с нг-повтора, что я щелкнул,

// 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(); 
 
});
[{ 
 
\t "name": "Karim", 
 
\t "Birth": "1\/1\/1980", 
 
\t "gender": "1", 
 
\t "address": "jalan jakarta", 
 
\t "city_code": "1", 
 
\t "phone": "0211111" 
 
}, { 
 
\t "name": "aaa", 
 
\t "Birth": "1982-2-1981", 
 
\t "gender": "Pria", 
 
\t "address": "Periksa di Laboratorium", 
 
\t "city_code": "sfsd", 
 
\t "phone": "a" 
 
}, { 
 
\t "name": "Ahmad", 
 
\t "Birth": "1\/1\/1982", 
 
\t "gender": "male", 
 
\t "address": "jalan jalan", 
 
\t "city_code": "100", 
 
\t "phone": "021111" 
 
}, { 
 
\t "name": "aslam", 
 
\t "Birth": "1991-10-1983", 
 
\t "gender": "Pria", 
 
\t "address": "Periksa di Rumah (Home Service)", 
 
\t "city_code": "jalan jalan", 
 
\t "phone": "LabConX" 
 
}, { 
 
\t "name": "Ahmad Karim", 
 
\t "Birth": "1991-10-1984", 
 
\t "gender": "Pria", 
 
\t "address": "Periksa di Laboratorium", 
 
\t "city_code": "jalan jalan", 
 
\t "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> 
 
    \t <option value="0">Januari</option> 
 
    \t <option value="1">Februari</option> 
 
    \t <option value="2">Maret</option> 
 
    \t <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> 
 
    \t <option value="0">1980</option> 
 
    \t <option value="1">1981</option> 
 
    \t <option value="2">1982</option> 
 
    \t <option value="3">1983</option> 
 
    </select> 
 
    <i></i> 
 
    </label> 
 
    </body> 
 
</html>

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

Так что это пример что я сделал, в этом примере на нем есть ng-repeat с radioobutton, и я хотел бы получить данные из значения, которое я нажал, и оно идет в текстовое поле под ним. Кроме того, я хотел бы получить данные номера с JSON о дате рождения, и когда значение нажато, данные о дате идут на выбор тега в HTML ...

Спасибо за ответы

+0

Я не вижу радиокнопки вместо текстового поля –

+0

извините, правильный в плункерах ... Я смущен, чтобы использовать фрагмент здесь –

+0

, чтобы вы хотели показать имя клиента, когда нажимаете на кнопку радио? Я думаю, что ответ JB Nizet верен, однако вы можете добиться этого, используя ng-click. –

ответ

1

ng-модель на p не имеет смысла. Нг-модель должна быть на входе:

в JS:

$scope.selection = {}; 

в 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}}"> 

Или, если вы хотите, чтобы весь клиент, чтобы хранить в а не только его название:

<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}}"> 
+0

Спасибо, это ответ, который я хочу , Еще раз, как насчет даты сэр? Есть ли у вас какие-либо идеи? –

+0

Дата (во втором примере) находится в selection.customer.Birth. –

+0

Хорошо, я попробую, спасибо за вашу помощь –

0

Вам нужно добавить ng-модель на ваш вход, поэтому, когда нажата кнопка радио, вы получаете переменная той, которая выбрана в переменной.

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

Который должен поместить значение cust для переключателя, нажатого в переменной customerSelected. Тогда на входе можно поставить:

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

Затем на выбор создал их как:

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

и он будет выбрать опцию по радио-кнопке, которая «значение атрибута» соответствует customerSelected.birth параметр.

Это может быть хорошо, если вы определить customerSelected на ваших script.js как:

$scope.customerSelected=null; 

или

$scope.customerSelected=[]; 

Вы можете посмотреть в документации AngularJs о select/radio button может.

0

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

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

Поскольку нг-повтор будет создать новую область, поэтому нужно использовать $ Parant привязки нг-модели.

Смежные вопросы