Angular.js 中的单选按钮和文本字段答案

【问题标题】：Radio buttons plus a text field in Angular.jsAngular.js 中的单选按钮和文本字段
【发布时间】：2018-05-14 09:59:41
【问题描述】：

使用 AngularJS，我想创建一个带有单选按钮的选项列表，其中最后一个有一个标有“其他”的空文本字段，用于输入不在列表中的选项。这是我bootstrapped in CodePen的想法的演示。由于 Stack Overflow 坚持在此消息中包含 CodePen 代码，因此这里是：

js:

angular.module('choices', [])
  .controller("MainCtrl", ['$scope', function($scope) {

    $scope.color = '';

    $scope.colors = [
      "Red",
      "Green",
      "Blue",
      "Other"
     ];

    $scope.changeColor = function(){
      $scope.color = "Red"
    };

}]);

html:

<html>
<head>
<body ng-app="choices" ng-controller="MainCtrl">
  <div ng-repeat="color in colors">
     <input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color">
       <label>
         {{color}}
       </label>
      <input type="text" ng-model="$parent.color" ng-show="color=='Other'">
  </div>
  <p></p>
  The chosen color is <strong>{{color}}</strong>
  <p></p>
  <button ng-click="changeColor()">Change color</button>
</body>
</html>

这是我希望这个演示应用程序执行的操作：

当我选择除Other 之外的任何选项时，文本字段应保持空白；
如果我将光标放在文本字段中，则应选择选项Other
一旦我开始在文本字段中输入，Other 选项应保持选中状态
如果我更改注册选项的模型（在通过单击Change color 按钮实现的演示应用程序中），则应选择相应的单选按钮。

我通过使用三个模型（一个用于颜色，一个用于跟踪单选按钮，一个用于Other 字段）和三个观察者实现了大部分功能，但是resultant app 似乎很脆弱，并且在某些方面失败了测试。您能否建议一种更好的方法来使用尽可能少的模型和观察者在 Angular 中创建这样的选择器？

（我的问题有点类似于this SO question，但我希望不同之处足以不被视为重复。）

【问题讨论】：

标签： angularjs

【解决方案1】：

为其他文本添加单独的范围属性：

$scope.other = '';

添加一个colorChanged() 方法，当颜色改变时将被调用。如果颜色不是“其他”，这会将其他文本设置为空：

$scope.colorChanged = function () {
    if ($scope.color != 'Other') {
        $scope.other = '';
    }
};

这也需要从changeColor() 调用。我最终更改了changeColor 以允许传入颜色。否则默认为红色：

$scope.changeColor = function(color){
    $scope.color = color || "Red";
    $scope.colorChanged();
};

将ng-change="colorChanged()" 添加到单选按钮：

<input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color" ng-change="colorChanged()">

更改文本框以使用 other 作为模型。使用 ng-focus 检测文本框何时聚焦，然后将颜色设置为“其他”。这样做会选择单选按钮。

<input type="text" ng-model="$parent.other" ng-show="color=='Other'" ng-focus="$parent.color = 'Other'"/>

更新颜色的显示以显示其他文本：

The chosen color is <strong>{{color}}<span ng-if="color === 'Other' && other != ''"> - {{other}}</span></strong>

Plunkr

【讨论】：

太好了，简单，干净！ :-)
谢谢。我的解决方案最终解决了您的问题吗？如果是这样，请选择我的答案作为解决方案。

【解决方案2】：

我对你的笔做了一些非常小的修改HERE。

简而言之，我没有将“其他”作为值，而是将其设置为空白选项，而输入实际上控制了该值。

$scope.colors = [
      "Red",
      "Green",
      "Blue",
      ""
     ];

html:

  <label >
     {{color || 'Other'}}
   </label>
  <input type="text" ng-model="$parent.color" ng-show="color==''">

这允许输入实际控制'Other'的值...

【讨论】：

如果颜色是其他，则其他应该只在其中输入文字