如何在angularjs中提交沒有表單的單選框值

Question

我在兩個表中顯示兩個json文件數據。 我可以console.log()選擇的每一行的值。 我做了一個提交按鈕，但是我不確定如何獲取這兩個值來提交它。 有人可以幫助我了解如何做嗎？

以下是我的兩張桌子

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

下面是我的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

將ng-model添加到單選按鈕

<td>
   <input type="radio" name="radioOutbound" ng-model="radio_value1">
</td>

第二個也是

<td>
   <input type="radio" name="radioInbound" ng-model="radio_value2">
</td>

在Submit函數中，您可以傳遞兩個值

<button type="submit" ng-click="submit(radio_value1, radio_value2)" >Submit</button>

在控制器中

$scope.submit = function(val1, val2){
  console.log(val1, val2);
}

如果您不想在函數中傳遞值，則值將在$scope.radio_value1和$scope.radio_value2

Answer 2

我創造了一個矮人，相信可以證明您的目標。 我對您的代碼的理解是：

• 您需要單選按鈕或單擊行以選擇項目。 入站和出站項目分別是獨立的部分，每個中僅應選擇一個無線電。
• 選定后，所有數據應返回給控制器。 這會將其全部發送回一個對象，並按模型分解。

在$ scope.submit中，您將在formData.radioOutbound上找到入站的選定選項，並在outData的formData.radioOutbound上找到選定的入站選項。

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

JS //提交$ 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>