Question

我正在研究AngularJs（1.x）我已经动态创建了单选按钮。有一个＆＃34;提交＆＃34;单选按钮下方的按钮，用于将所选值发送到后端。

但问题是，我总是得到＆＃34;未定义＆＃34;作为我控制器中选定的单选按钮值。你能告诉我我哪里出错吗？

以下是我的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
}

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

编辑：由于评论部分的人问我如何＆＃34;详细信息＆＃34;数组看起来像......＆＃34;详情＆＃34; 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，因为这个radiobutton或checkbuttons只处理布尔值

在您的情况下，根据您的目的，您有几种方法可以解决问题：

**解决方案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 CODE

 $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);
}

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

2 个答案: