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