I am displaying two json files data in two tables. I am able to console.log()
the value of each row selected. I made a submit button, but I am not sure how to get those two values to submit it. Does someone could help me to understand how to do that ?
Below are my two tables
<div class="row">
<div class="col-md-8">
<h1>Choose your outbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="outbound in outbounds" ng-class="{active : isSelected(outbound)}" ng-click="setMaster(outbound)">
<td>{{ outbound.departure }}h</td>
<td>{{ outbound.arrival }}h</td>
<td>{{ outbound.ecoPrice }}</td>
<td>{{ outbound.businessPrice }}</td>
<td>{{ outbound.firstPrice }}</td>
<td>
<input type="radio" name="radioOutbound">
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h1>Choose your inbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="inbound in inbounds" ng-class="{active : isSelected(inbound)}" ng-click="setMaster(inbound)">
<td>{{ inbound.departure }}h</td>
<td>{{ inbound.arrival }}h</td>
<td>{{ inbound.ecoPrice }}</td>
<td>{{ inbound.businessPrice }}</td>
<td>{{ inbound.firstPrice }}</td>
<td>
<input type="radio" name="radioInbound">
</td>
</tr>
</table>
<button type="submit" ng-click="submit()">Submit</button>
</div>
</div>
Below is my AngularJS
// Inbound
$scope.isSelected = function(inbound) {
return $scope.selected === inbound;
}
$scope.setMaster = function(inbound) {
$scope.selected = inbound;
console.log($scope.selected);
}
// Outbound
$scope.isSelected = function(outbound) {
return $scope.selected === outbound;
}
$scope.setMaster = function(outbound) {
$scope.selected = outbound;
console.log($scope.selected);
}
// Submit
$scope.submit = function() {
console.log($scope.selected);
}
add ng-model
to radio button
<td>
<input type="radio" name="radioOutbound" ng-model="radio_value1">
</td>
and for the second one also
<td>
<input type="radio" name="radioInbound" ng-model="radio_value2">
</td>
in the submit function you can pass the two values
<button type="submit" ng-click="submit(radio_value1, radio_value2)" >Submit</button>
in the controller
$scope.submit = function(val1, val2){
console.log(val1, val2);
}
if you dont want to pass values in the function then values will be in $scope.radio_value1
and $scope.radio_value2
I've created a plunker that I believe demonstrates your desired goal. My understanding from your code was:
Within $scope.submit, you will find the selected option for inbound on formData.radioOutbound, and on formData.radioOutbound for the outbound item.
https://plnkr.co/edit/iwHi5NEDJSahG0JJ31ih?p=preview
JS // Submit $scope.submit = function(formData) { console.log(formData); }
$scope.formData = {
radioOutbound: '',
radioInbound: ''
};
$scope.outbounds = [
{
departure: 'today',
arrival: 'tomorrow',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
},
{
departure: 'tomorrow',
arrival: 'next day',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
}
]
$scope.inbounds = [
{
departure: 'today',
arrival: 'tomorrow',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
},
{
departure: 'tomorrow',
arrival: 'next day',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
}
]
HTML
<div class="row" >
<div class="col-md-8">
<h1>Choose your outbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="outbound in outbounds"
ng-class="{'success' : formData.radioOutbound == this.outbound}"
ng-click="formData.radioOutbound = this.outbound">
<td>{{ outbound.departure }}h</td>
<td>{{ outbound.arrival }}</td>
<td>{{ outbound.ecoPrice }}</td>
<td>{{ outbound.businessPrice }}</td>
<td>{{ outbound.firstPrice }}</td>
<td>
<input type="radio" ng-value="outbound" ng-model="formData.radioOutbound">
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h1>Choose your inbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="inbound in inbounds"
ng-class="{'success' : formData.radioInbound == this.inbound}"
ng-click="formData.radioInbound = this.inbound">
<td>{{ inbound.departure }}h</td>
<td>{{ inbound.arrival }}h</td>
<td>{{ inbound.ecoPrice }}</td>
<td>{{ inbound.businessPrice }}</td>
<td>{{ inbound.firstPrice }}</td>
<td>
<input type="radio" ng-value="inbound" ng-model="formData.radioInbound">
</td>
</tr>
</table>
<button type="submit" ng-click="submit(formData)">Submit</button>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.