如何在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

我創建了一個重擊者，我相信展示你想要的目標。我從您的代碼中瞭解到：

• 您希望單選按鈕或單擊的行選擇項目。入站和出站項目分別是單獨的部分，每個部分只應選擇一個無線電。
• 所有數據都應該返回給控制器，一旦選定。這將以一種反對意見的形式發回，並由模型分解。

在$ scope.submit中，您會在formData.radioOutbound上找到選定的選項，在出站項目上找到formData.radioOutbound上的選定選項。

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

JS //提交 $ scope.submit =函數（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> 

Answer 2

添加ng-model以單選按鈕

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

和第二個也

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

在提交功能

可以在控制器通過兩個值

<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