在AngularJS中设置单选按钮答案

【问题标题】：Set radio button in AngularJS在AngularJS中设置单选按钮
【发布时间】：2017-02-03 16:41:50
【问题描述】：

如何设置单选按钮？我有 3 个选项。当我将单选按钮更改为例如值NC。我想在完成一个函数后将其重置为值F。

<div>
    <label>
    <input type="radio" id="ns_classF" ng-model="ns_class" value="F" ng-disabled='btn_radio_ns_class_disable'>
    <?php echo $lang['LBL_INVOICE']; ?>
    </label><br/>
    <label>
    <input type="radio" id="ns_classCN" ng-model="ns_class" value="CN" ng-disabled='btn_radio_ns_class_disable'>
    <?php echo $lang['LBL_CREDITNOTE']; ?>
    </label><br/>
    <label>
    <input type="radio" id="ns_classO" ng-model="ns_class" value="O" ng-disabled='btn_radio_ns_class_disable'>
    <?php echo $lang['LBL_QUOTE']; ?>
    </label>
</div>

这是我尝试过的：

    $scope.ns_class = 'F' ;
    document.getElementById("ns_classF").checked = true;
    document.getElementById("ns_classCN").checked = false;
    document.getElementById("ns_classO").checked = false;

单选按钮更改，但范围没有值F。

【问题讨论】：

我看到你问了很多问题，但没有将其中一个标记为正确。请在您的问题中标记正确的答案。我会帮助其他用户了解 Stackoverflow 的工作原理。
发现问题：必须将 $parent 添加到 ng-modal 名称中。

标签： javascript angularjs radio-button

【解决方案1】：

给你。我还创建了一个JSFiddle。你不需要像 document.getElementById("ns_classF").checked = true; 这样的原生 JavaScript。在这里，您可以在AngularJS documentation about radio buttons 中了解它。

查看

<div ng-controller="MyCtrl">
  <div>
    <label>
      <input type="radio" 
             ng-model="nsClass" 
             value="F" 
             ng-disabled="btn_radio_ns_class_disable">
      F</label><br/>
    <label>
      <input type="radio" 
             ng-model="nsClass" value="CN" 
             ng-disabled="btn_radio_ns_class_disable">
      CN</label><br/>
    <label>
      <input type="radio"
             ng-model="nsClass" 
             value="O" 
             ng-disabled="btn_radio_ns_class_disable">
      O</label>
    <button ng-click="click()">
      Cick me
    </button>
  </div>
</div>

AngularJS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.nsClass = '';

    $scope.click = function () {
       $scope.nsClass = 'F';
    }
}

【讨论】：

JSFiddle 完美运行。但在我的代码中，这只适用于一次。单击按钮，单选更改，单击单选按钮，单击按钮，单选按钮不更改。
@data2info 因此，请将您的代码与上面给出的解决方案进行比较。我无法修复用户自己创建的错误。

【解决方案2】：

工作演示：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.ns_class = '';
    $scope.resetRadio = function(val) {
      $scope.ns_class = 'F';
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div>
    <label>
    <input type="radio" id="ns_classF" ng-model="ns_class" value="F" ng-disabled='btn_radio_ns_class_disable'> F
    </label><br/>
    <label>
    <input type="radio" id="ns_classCN" ng-model="ns_class" value="CN" ng-disabled='btn_radio_ns_class_disable' ng-click="resetRadio(ns_class)"> CN
    </label><br/>
    <label>
    <input type="radio" id="ns_classO" ng-model="ns_class" value="O" ng-disabled='btn_radio_ns_class_disable' ng-click="resetRadio(ns_class)"> O
    </label>
</div>
</div>

【讨论】：

在使用 AngularJS 时不推荐 DOM 操作。请参考stackoverflow.com/questions/14994391/…
@lin 感谢您的纠正。我更新了我的答案，请您从答案中删除反对票。
是的，当然 =)。现在看起来好多了！您不需要将ns_class 解析为resetRadio()。