无法在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
}

有人能告诉我们什么是获取动态创建的单选按钮值的正确方法吗？

编辑：因为评论部分的一个人问我"details“数组看起来如何.”details“数组是一个对象数组。以下是样本：

[
  {
    "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模型值作为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-模型，在ng-模型中，只能分配与分配给它的html元素对应的值​​。示例:如果您在一个ng模型中使用它，它只会将true或false赋值给变量，因为这个无线电按钮或复选按钮只处理布尔值。

在您的例子中，您有几种解决问题的方法，具体取决于您想要做什么：

**Soluction 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模型，你可以这么做。

解决方案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);
}