如何在Angular js的单选按钮中动态设置选中状态答案

【问题标题】：How to dynamically set checked state in radio button in Angular js如何在Angular js的单选按钮中动态设置选中状态
【发布时间】：2016-12-23 11:19:44
【问题描述】：

我正在使用 MEAN Stack，并且我有一个包含收音机的表单

提交成功的按钮现在我想要的是编辑记录。我想要的是记录单选按钮应该根据数据库值进行检查。

如何做到这一点。

我的编辑表单是：-

 <form id = "expensesCreate" class="form-horizontal" name="myForm">
    <div class="form-group">
                            <label for="Phone_no" class="col-sm-3">Address</label>
                            <div class="col-sm-4 @if($errors->has('Phone_no')) has-error @endif">
                                <input class="form-control input-sm" placeholder="" autocomplete="off" id="address"  name="address" ng-model="address"  type="address" value ="{{registeruser.address}}" required>
                                <p class="error" ng-show=" myForm.password.$touched && myForm.password.$error.required" >Address is required.</p>
                            </div>
                        </div>

                         <div class="form-group">
                            <label for="Phone_no" class="col-sm-3">Sex</label>
                            <div class="col-sm-4 @if($errors->has('Phone_no')) has-error @endif">
                                Male <input type="radio"  ng-model="sex" value="Male" >
                                FeMale<input type="radio" ng-model="sex" value="Female">

                            </div>
                        </div>
</form>

如果性别是男性的特定记录进入数据库如何检查或选择男性单选按钮。

【问题讨论】：

数据库中的性别值是否与复选框值相同：男性和女性？（是驼色吗？）
不，男性和女性的价值不同
如果将“value”属性更改为与数据库中的值相同，它应该可以工作。

标签： javascript jquery angularjs mean-stack

【解决方案1】：

您可以在您的视图中将sex 属性评估为truthy，如下所示：

<td><input type='radio' ng-checked="p.sex=='male'"></td>
<td><input type="radio"  ng-checked="p.sex=='female'" ></td>

希望对你有帮助。

【讨论】：

plunkr 链接坏了

【解决方案2】：

使用 ng-value 属性将单选按钮设置为选中状态。

 ng-value="true"

【讨论】：

如果在编辑期间使用 ng-value="true" 会选择哪个单选按钮

【解决方案3】：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="myCtr">
  <form id="expensesCreate" class="form-horizontal" name="myForm">
    <div class="form-group">
      <label for="Phone_no" class="col-sm-3">Address</label>
      <div class="col-sm-4 @if($errors->has('Phone_no')) has-error @endif">
        <input class="form-control input-sm" placeholder="" autocomplete="off" id="address" name="address" ng-model="address" type="address" value="{{registeruser.address}}" required>
        <p class="error" ng-show=" myForm.password.$touched && myForm.password.$error.required">Address is required.</p>
      </div>
    </div>

    <div class="form-group">
      <label for="Phone_no" class="col-sm-3">Sex</label>
      <div class="col-sm-4 @if($errors->has('Phone_no')) has-error @endif">
        Male
        <input type="radio" name="gender" ng-model="sex" value="male"> FeMale
        <input type="radio" name="gender" ng-model="sex" value="female">

      </div>
    </div>
  </form>
  <script>
    angular.module('app', [])
      .controller('myCtr', function($scope) {
        $scope.sex = 'female'; // Instead of this use database value here
      })
  </script>
</body>

</html>

【讨论】：