在AngularJS中设置单选按钮

Question

如何设置radiobutton？我有3个选择。当我将radiobutton改为例如价值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。

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

Answer 2

工作演示：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;