无法在 AngularJs 中获取选定的单选按钮值

Question

我正在研究 AngularJs(1.x) 我已经动态创建了单选按钮。单选按钮下方有一个“提交”按钮，可将所选值发送到后端。

但问题是，我总是在我的控制器中将“未定义”作为选定的单选按钮值。你能告诉我哪里出错了吗？

下面是我的 HTML 代码：

 <table>
           <tr ng-repeat="detail in details">
              <td><input type="radio" name="userinputs" ng-model="selectedValues[detail.path]" /></td>
              <td class="text">{{detail.created_time}}</td>
              <td class="text">{{detail.path}}</td>
            </tr>
      </table>
    <button type="button" ng-click="submitAction()> 

以下是我的控制器中的代码：

$scope.selectedValues = [];
$scope.submitAction = function(){
   console.log("selected values:",$scope.selectedValues); //empty array
}

有人能说出获取动态创建的单选按钮值的正确方法吗？

编辑：由于评论部分的人问我“详细信息”数组的外观如何......“详细信息”数组是一个对象数组。这是示例：

[
  {
    "created_time": "2018-06-14 09:15:59.923639",
    "path": "hdfs://rhel-sp1-hadoop-mgr-1.node.dc1.pnda.local:8…da/flink/savepoints/savepoint-748ad1-284636263a29",
    "$$hashKey": "object:124"
  },
  {
    "created_time": "2018-06-14 09:17:33.913376",
    "path": "hdfs://rhel-sp1-hadoop-mgr-1.node.dc1.pnda.local:8…da/flink/savepoints/savepoint-748ad1-303080089004",
    "$$hashKey": "object:125"
  },
  {
    "created_time": "2018-06-14 09:22:17.562679",
    "path": "hdfs://rhel-sp1-hadoop-mgr-1.node.dc1.pnda.local:8…da/flink/savepoints/savepoint-748ad1-ea56f40fc986",
    "$$hashKey": "object:126"
  }
]

Answer 1

在提交时将 ng-model 值作为参数传递给 ng-click 函数，如下所示

<table>
               <tr ng-repeat="detail in details">
                  <td><input type="radio" ng-value="detail" name="userinputs" ng-model="data.selectedValues" /></td>
                  <td class="text">{{detail.created_time}}</td>
                  <td class="text">{{detail.path}}</td>
                </tr>
          </table>
        <button type="button" ng-click="submitAction(data.selectedValues)"> 

Answer 2

你不能以那种方式使用ng-model，在ng-model中你只能分配与你分配给它的html元素对应的值。 例子： 如果您在 ng-model 中使用它，则只会将 true 或 false 分配给变量，因为此单选按钮或检查按钮仅处理布尔值

在您的情况下，您有几种方法可以解决问题，具体取决于您想要做什么：

**解决方案1：**如果要添加多个选定的值

 <table>
                    <tr ng-repeat="detail in details">
                       <td>
                         <input type="checkbox" name="userinputs" ng-click="addSelectedValue(detail)" ng-model="someModel" /></td>
                       <td class="text">{{detail.created_time}}</td>
                       <td class="text">{{detail.path}}</td>
                     </tr>
               </table>
             <button type="button" ng-click="submitAction()">Sugmit</button>

// JAVASCRIP代码

 $scope.selectedValues = [];

//add or remove selected value
$scope.addSelectedValue = function(value){
    let i = $scope.selectedValues.indexOf(value);
    // if values exist in array, remove  from selected values
    if(i>=0){
         $scope.selectedValues.splice(i,1);
    }
    //else add to selected values
    else{
        $scope.selectedValues.push(value);
    }
}
//submit values
$scope.submitAction = function(){
    $scope.selectedValues;
}

解决方案 2：如果您只想选择一个值，则更容易

 <controller ng-controller="main">
                <table>
                    <tr ng-repeat="detail in details">
                       <td>
                         <input type="radio" name="userinputs" ng-click="selectedValue = detail" ng-model="someModel" /></td>
                       <td class="text">{{detail.created_time}}</td>
                       <td class="text">{{detail.path}}</td>
                     </tr>
               </table>
             <button type="button" ng-click="submitAction()">Sugmit</button>
            </controller>

// JAVASCRIPT

$scope.selectedValue = {};
//submit values
$scope.submitAction = function(){
    $scope.selectedValue;
}

在两种解决方案中 我使用 ng-click 事件来捕获值（您可以使用 ng-change），关键是您需要一些事件来为变量赋值。

但如果你想使用 ng-model，你可以这样做。

解决方案 3

<controller ng-controller="main">
                <table>
                    <tr ng-repeat="detail in details">
                       <td>
                         <input type="radio" name="userinputs"  ng-model="detail.isSelected" /></td>
                       <td class="text">{{detail.created_time}}</td>
                       <td class="text">{{detail.path}}</td>
                     </tr>
               </table>
             <button type="button" ng-click="submitAction()">Sugmit</button>
            </controller>

// JAVASCRIPT

//submit values
$scope.submitAction = function(){
   //select all the values that are marked as selected
    let selectedValues = $scope.details.filter((values)=>values.isSeleted==true);
}