如何在angularjs中获取选定单选按钮的值答案

【问题标题】：How to get value of selected radio button in angularjs如何在angularjs中获取选定单选按钮的值
【发布时间】：2021-01-09 06:28:18
【问题描述】：

我有两个单选按钮 pass 和 fail。

如何获取所选单选按钮的值。

<div class="col-md-4">
            Result
            <div class="radio">
                <label><input type="radio" name="rdoResult">pass</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="rdoResult">fail</label>
            </div>
        </div>

我是否需要使用 ng-model 或其他东西。在 jquery 中，我很了解 angularjs 中没有的东西。

【问题讨论】：

向我们展示你的 angularjs 代码...

标签： angularjs

【解决方案1】：

两者应该具有相同的ng-model 和不同的ng-value（用于选择options 或radio 按钮），以便在result $scope 变量上更改所选值，您可以在表单提交或按钮单击时在控制器中获取该值。

标记

<div class="col-md-4">
    Result
    <div class="radio">
        <label>
            <input ng-model="result" type="radio" name="rdoResult" ng-value="'pass'">
              pass
        </label>
    </div>
    <div class="radio">
        <label>
            <input ng-model="result" type="radio" name="rdoResult" ng-value="'fail'">
              fail
        </label>
    </div>
</div>

【讨论】：

真棒..最简单的方法来完成这项任务。谢谢
@Gaurav123 很高兴知道它有帮助..谢谢:)
这个答案仍然没有说明在 html 中更改时如何在 js 中传递/获取“结果”值。它只解释了它如何在 html 模板中可用。当我在 js 中具有 $scope.result 的值时，Manikanta Reddy 的以下答案有效。
@CodeTweetie 我回答了 OP 专门面临的问题。并且每当您将值绑定到ng-model 时，它肯定会在有界控制器范围内可用。我没有看到downvote背后的意义。很明显，您可以根据某些用户交互来形成价值，例如按钮单击或表单提交（特别是）。我虽然更新了答案
感谢您的解释，我可能在设置单选按钮的值时出错了。在您解释了单选按钮的不同值之后，它对我有用。

【解决方案2】：

angular.module('resultApp', []).controller('resultCtrl', function($scope) {
 
  $scope.result = 'pass';
  
  $scope.submitResult = function(result) {
    
    alert(result)
  };
});

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
<body ng-app='resultApp' ng-controller='resultCtrl'>
  
  <div class="col-md-4">
    Result
    <div class="radio">
        <label><input type="radio" ng-model='result' ng-value='"pass"' name="rdoResult">pass</label>
    </div>
    <div class="radio">
        <label><input type="radio" ng-model='result' ng-value='"fail"' name="rdoResult">fail</label>
    </div>
</div>
  {{result}}
  <button ng-click="submitResult(result)">See Result</button>
  
  </body>

【讨论】：

请告诉我如何在控制器中预选单选按钮而不是 html？ $scope.result == "pass" 当我们加载页面时它会预先选择收音机吗？

【解决方案3】：

是的，您必须添加 ng-model 才能获得单选按钮的值

<div class="col-md-4">
                Result
                <div class="radio">
                    <label><input type="radio" ng-model="button.value" name="rdoResult" value="pass">pass</label>
                </div>
                <div class="radio">
                    <label><input type="radio" ng-model="button.value" name="rdoResult" value="fail">fail</label>
                </div>
            </div> {{button.value}}

【讨论】：

【解决方案4】：

这是你的 javascript

  <script>
    aap=angular.module('myApp',[])
    .controller('myCtrl',["$scope",function($scope){
      $scope.change='data';
      $scope.getVal=function(){

        console.log($scope.changedVal);
        $scope.change=$scope.changedVal;
      }
    }]);

  </script>

和你的 html

<body ng-app="myApp">
    <h1>{{1+1}}</h1>
    <div class="col-md-4" ng-controller="myCtrl">
            Result
            <div class="radio">
                <label><input type="radio" name="rdoResult" ng-model="changedVal" value="pass" ng-click="getVal()">pass</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="rdoResult" ng-model="changedVal" value="fail" ng-click="getVal()">fail</label>
            </div>
            {{change}}
        </div></body>

working demo

希望这是您正在寻找的。p>

【讨论】：

【解决方案5】：

上述解决方案的指令和 ng-repeat 内部将不起作用

这是在指令中获取选定值的最佳方法：

Template : '<tr ng-repeat="item in ExistingReportData"><td class="text-center"><input type="radio" name="rbReportData" ng-change="RadioChange(item.ActivityHeaderId)" ng-model="SelectedExistingReportData" ng-value="{{item.ActivityHeaderId}}"/>{{item.ActivityHeaderId}}</td></tr>' 

controller: function ($scope) {
            $scope.RadioChange = function (s) {
                $scope.SelectedExistingReportData = s;
            };

            $scope.setWeldDataToGrid = function () {
                alert($scope.SelectedExistingReportData);
                //  $('.modal').modal('hide');
            }

        }



'<button class="btn button-main btn-primary btn-sm" id="btnWelderSetTo" ng-click="setWeldDataToGrid()" ><span aria-hidden="true" class="glyphicon glyphicon-save"></span> {{ \'OK\' | translate }}</button>'

【讨论】：

【解决方案6】：

在 ng-model 中使用点 (.) 解决了这个问题：

在您的 HTML 中：

<input id="base" type="radio" name="content" ng-model="radio.fileType" ng-value="'base'" ng-click="refreshScreen()">

<input id="dynamic" type="radio" name="content" ng-model="radio.fileType" ng-value="'dynamic'" ng-click="refreshScreen()">


<button type="button" class="btn btn-default" ng-click="downloadFile(radio.fileType)">Get Template</button>

在您的控制器中：

angular.module('resultApp', []).controller('resultCtrl', function($scope) {

  $scope.downloadFile= function(result) {    
    alert(result)
  };
});

【讨论】：

【解决方案7】：

<input type="radio" ng-model="teamSelectionOption.name" value="choose">choose<br>
<input type="radio" ng-model="teamSelectionOption.name" value="create">create<br>

设置默认选项并更新它就像在控制器中完成的那样

$scope.teamSelectionOption = {
  name: 'create'
};

然后在模板中访问。 {{teamSelectionOption.name}}

【讨论】：