Fatal编程技术网
  • angularjs/
  • 如何在angularjs中获取所选单选按钮的值

如何在angularjs中获取所选单选按钮的值

angularjs

如何在angularjs中获取所选单选按钮的值,angularjs,Angularjs,我有两个单选按钮pass和fail 如何获取所选单选按钮的值 <div class="col-md-4"> Result <div class="radio"> <label><input type="radio" name="rdoResult">pass</label> </div> <d

我有两个单选按钮
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模型还是其他什么。在jquery中，我对angularjs中没有的东西了如指掌。

两者都应该有相同的
ng模型
和不同的（用于选择
选项
s或
单选按钮），因此，所选值将在
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>




结果
通过
失败

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


<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}}




结果
通过
失败
{{button.value}}

这是您的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>




aap=angular.module（'myApp'，[]）
.controller（'myCtrl'，[“$scope”，函数（$scope）{
$scope.change='data'；
$scope.getVal=function（）{
log（$scope.changedVal）；
$scope.change=$scope.changedVal；
}
}]);


还有你的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>




{{1+1}}
结果
通过
失败
{{change}}




希望这就是你想要的。


angular.module（'resultap'，[]）.controller（'resulttrl'，function（$scope）{
$scope.result='pass'；
$scope.submitResult=函数（结果）{
警报（结果）
};
});


结果
通过
失败
{{result}}
见结果

指令内部和ng重复上述解决方案将不起作用

以下是获取指令内部选定值的最佳方法：


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>'



模板：“{{item.ActivityHeaderId}”
控制器：功能（$scope）{
$scope.RadioChange=功能{
$scope.SelectedExistingReportData=s；
};
$scope.setWeldDataToGrid=函数（）{
警报（$scope.SelectedExistingReportData）；
//$（'.modal'）.modal（'hide'）；
}
}
“{{'OK\'| translate}}”

在ng模型中使用点（.）解决了以下问题：

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



然后在模板中访问。{{teamSelectionOption.name}
向我们展示您的angularjs代码…棒极了..完成此任务最简单的方法。Thanks@Gaurav123很高兴知道它有帮助..谢谢：）这个答案仍然没有说明在html中更改时如何在js中传递/获取“result”值。它只解释了它如何在html模板中可用。Manikanta Reddy的以下回答在我的值为$scope.result in js时有效。@CodeTweetie我回答的问题是OP特别面临的。每当你将值绑定到
ng model
时，它肯定会在有界控制器范围内可用。我看不出投反对票有什么意义。。很明显，您可以基于一些用户交互，例如按钮单击或表单提交（特别是），在中形成值。我更新了答案，但谢谢你的解释，我可能在设置单选按钮的值时出错了。在您解释了单选按钮的不同值之后，我觉得这很有效。请告诉我如何在控制器中预选单选按钮而不是html$scope.result==“通过”加载页面时是否预选了收音机？

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

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



<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'
};