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

【问题标题】：AngularJS radio button group with "other" option that includes a text fieldAngularJS单选按钮组，带有“其他”选项，包括一个文本字段
【发布时间】：2014-01-12 17:53:17
【问题描述】：

我有一个包含三个单选按钮的表单。第三个单选按钮是“Other”，有一个文本字段，用户可以在其中输入内容。我可以通过将“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 为空白，同时将文本留在屏幕上，以便在重新选择时用户不必重新输入文本字段中的内容。

【问题讨论】：

标签： javascript html angularjs

【解决方案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

【讨论】：

ng-required 效果很好；谢谢！如果form.Program != 'other'，关于如何让我的模型显示一个空字符串有什么想法吗？我开始意识到我可能需要以某种方式绑定到隐藏字段（因为 angularJS 正在做 2 路绑定）。
您也可以尝试使用 ng-change 来提高表现力。由于 Angular 具有您提到的 2 向绑定，因此隐藏的输入字段对您没有太大帮助。
你的 $watch 工作了，虽然我注意到页面加载时控制台窗口中的 javascript 引用错误，所以我在函数中添加了以下保护子句：if (angular.isUndefined($scope.form)) return;。但是，如果我选择“其他”，输入内容，然后选择选项 1，然后选择选项 2，然后再次选择“其他”，则文本框为空白。

【解决方案2】：

这就是我最终的结果。这与雨果的回答略有不同。主要区别在于“其他”文本在屏幕上保持可见。我只是想我会把它记录下来作为一种替代方法。

<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;
    }
});

【讨论】：