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>

在提交功能中，您可以传递两个值

<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上找到入站的选定选项，在出站项目的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>

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

2 个答案: