Question

我有一组表单中需要的单选按钮。其中一个单选按钮可以选择输入自定义值。如果我选择此单选按钮并开始键入自定义值，则取消选择单选按钮。我该如何解决这个问题？

<div ng-controller="MyCtrl">
    <form>
        <input type="radio" value="red" ng-model="color" ng-required="!color">red</input>
        <input type="radio" value="blue" ng-model="color" ng-required="!color">blue</input>
        <input type="radio" ng-value="field" ng-model="color" ng-required="!color">Other:</input>
        <input type="text" ng-model="field"></input>
    </form>
</div>

Jsfiddle here。

Answer 1

正如AngularJS官方文档中所述的输入型无线电

ngValue：Angular表达式，用于设置选择时表达式应设置的值。

因此，只要更改了ngValue属性中指定的模态变量，它就会自动取消选择单选按钮，这样，当它再次被选中时，分配给ngValue的表达式中的值可以分配给单选按钮。

因此，您可以监控文本框中的更改，并在每次按键时设置模态变量的值。

HTML：

    <input type="radio" value="{{field}}" ng-model="color" ng-required="!color">Other:</input>
    <input  ng-change="checkState()" type="text" ng-model="field"></input>

JS：

    $scope.checkState = function() {
        $scope.color = $scope.field;
    };

更新了plunker here

NgValue更改时，角度单选按钮取消选择

1 个答案: