Question

我想问一下如何从ng-repeat中获取数据。在ng-repeat div中我放了一个单选按钮。

我想尝试如何从我点击的ng-repeat中获取文本框中的数据，

＆＃13;

// 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();
});

＆＃13;

[{
	"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"
}]

＆＃13;

<!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>

＆＃13;

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

这就是我所做的例子，在这个例子中有一个带有radiobutton的ng-repeat，我想从我点击的值中获取数据，然后进入下面的文本框。另外，我想从json获取有关出生日期的数字数据，当点击该值时，有关日期的数据将转到HTML中的select标记...

感谢您的回答

Answer 1

p上的ng模型没有意义。 ng模型需要在输入上：

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

Answer 2

您需要在输入中添加ng模型，因此单击单选按钮时，您将获得变量中所选变量的变量。

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

应该在customerSelected变量中单击单选按钮的cust值。然后在输入中你可以输入：

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

然后在选择中将它们创建为：

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

它将选择单选按钮上的选项＆＃39; value＆＃39;属性与customerSelected.birth参数匹配。

如果您将script.js上的customerSelected定义为：

，那可能会很好

$scope.customerSelected=null;

或

$scope.customerSelected=[];

您可以查看有关select / radio button的AngularJs文档。

Answer 3

＆＃13;

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();
});

＆＃13;

<!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>

＆＃13;

因为ng-repeat将创建一个新范围，所以必须使用$ parant bind ng-model。

AngularJS如何从单击单选按钮获取数据

3 个答案: