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