Question

我有一个组中有三个单选按钮的表单。第三个单选按钮是“其他”，并且有一个文本字段，用户可以在其中输入内容。我可以通过将“required”属性添加到单选按钮的输入元素来创建所需的单选按钮。但是，当且仅当选择“其他”单选按钮时，我才想要使文本字段成为必需。我怎么能做到这一点？

<p>
    Program:
    <label><input type="radio" ng-model="form.Program" name="Program" value="option 1" required /> option 1</label>
    <label><input type="radio" ng-model="form.Program" name="Program" value="option 2" required /> option 2</label>
    <label><input type="radio" ng-model="form.Program" name="Program" value="other" required /> other</label>
    <input type="text" ng-model="form.OtherProgram" ng-disabled="form.Program != 'other'" name="Program_Other" />
</p>

我想做的另一件事是以某种方式确保如果未选择“其他”，则$ scope.form.OtherProgram为空白，同时将文本保留在屏幕上，以便如果重新选择用户无需重新键入文本字段中的内容。

Answer 1

您可以使用ng-required。像

这样的东西

<input type ="text" ng-required ="form.Program != 'other'">

应该有效。

关于你的另一个问题，你必须使用一些控制器逻辑和form.OtherProgram的某种临时变量，例如使用$ watch。

$scope.$watch('form.Program', function(mVal){
  if (angular.isUndefined($scope.form)) return; 

  if(mVal === 'other'){
     $scope.form.OtherProgram = $scope.tmVar;
  } else {
    if($scope.form.OtherProgram !== null){
      $scope.tmVar = $scope.form.OtherProgram;
      $scope.form.OtherProgram = null;
   }
 }
});

Plunker：http://plnkr.co/edit/npvUXpRhB5MYJOstwd88?p=preview

Answer 2

这是我最终的结果。这是hugo的回答略有不同。主要区别在于“其他”文本在屏幕上保持可见。我只是认为我会将此作为替代方法进行记录。

<p>
    Program:
    <label><input type="radio" ng-model="form.Program" name="Program" value="option 1" required /> option 1</label>
    <label><input type="radio" ng-model="form.Program" name="Program" value="option 2" required /> option 2</label>
    <label><input type="radio" ng-model="form.Program" name="Program" value="Other" required /> Other</label>
    <input type="text" ng-model="OtherProgram" ng-disabled="form.Program != 'Other'" ng-change="form.OtherProgram = OtherProgram" ng-required="form.Program == 'Other'" name="Program_Other" />
    <input type="hidden" ng-model="form.OtherProgram" />
</p>

然后我的控制器中的这个$ watch函数：

$scope.$watch('form.Program', function (mVal) {
    if (angular.isUndefined($scope.form)) return;

    if (mVal === 'Other') {
        $scope.form.OtherProgram = $scope.OtherProgram;
    } else {
        $scope.form.OtherProgram = null;
    }
});

AngularJS单选按钮组，带有“其他”选项，包括文本字段

2 个答案: