Question

我正在尝试按照单选按钮的角度文档。 https://docs.angularjs.org/api/ng/input/input%5Bradio%5D 不知道我做错了什么。

最终，如果选择了无线电选项3，我希望div“stuff”让课程“静音”。

我的HTML

<form name="shippingVm.MasterCartonForm" ng-controller="shippingControler as shippingVm" >

    [{{shippingVm.shipOption.val}}]

    <div class="col-sm-3 col-sm-offset-1">
        <label class="radio-inline">
           <input type="radio" ng-model="shippingVm.shipOption.val" name="shippingOptions" ng-value="one" />
           I will call Purolator for a pickup.
        </label>
    </div>
    <div class="col-sm-3">
        <label class="radio-inline">
            <input type="radio"  ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="two" />
            I will deliver them to Purolator.
        </label>
    </div>
    <div class="col-sm-4">
        <label class="radio-inline">
            <input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="muted" />
            I will deliver them to the Wizmo warehouse myself.
        </label>
    </div>

    <div class="ng-class="shippingVm.shipOption.val">
        stuff
    </div>

</form>

我的控制器：

vm.shipOption = {val: "NOT-muted"};

HTML中的这个调试行检查我是否得到了正确的值：

[{{shippingVm.shipOption.val}}]

以 [未静音] 开头 - 应该如此。但是，当我选择任何单选按钮时，它会变成空白。

根据文档，点击收音机应将收音机的值传递到模型中。

我错过了什么？

Answer 1

哦，我现在看到了。

单选按钮的value="muted"不应为ng-value="muted"。

ng-value仅用于特殊情况。

Answer 2

您的ng-class不正确。请参阅下面的代码段，了解它应该是什么样的示例。第二个问题是你想要价值而不是ng值。来自：https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

value选择时应设置ngModel表达式的值。请注意，值仅支持字符串值，即范围模型也需要是字符串。如果您需要复杂的模型（数字，对象，......），请使用ngValue。

ngValue选择无线电时将设置ngModel的角度表达式。如果需要非字符串ngModel（boolean，array，...），则应使用value属性代替value。

.muted {
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <label>Chicken or the Egg?</label>
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
      </label>
    </div>
  </div>
  <div ng-class="{'muted': formData.chickenEgg === 'egg'}">
    stuff
  </div>
</div>

从角度单选按钮获取价值

2 个答案: