如何在angularjs中提交没有表单的单选框值

Question

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

Answer 1

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

Answer 2

I've created a plunker that I believe demonstrates your desired goal. My understanding from your code was:

• You wanted either the radio button or the row clicked to select the item. The inbound and outbound items were each seperate sections, and only one radio in each should be selected.
• All data should be returned back to the controller, once selected. This will send it all back in one objected, broken down by the model.

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>