Question

使用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所以问题，但我希望不同，不要被视为重复。）

Answer 1

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

$scope.other = '';

添加colorChanged()方法，该方法将在颜色更改时调用。如果颜色不是＆＃39;其他＆＃39;：

，这会将其他文字设置为空

$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检测文本框何时聚焦，然后将颜色设置为＆＃39;其他＆＃39;。这样做会选择单选按钮。

<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

Answer 2

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

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

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

HTML：

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

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

单选按钮加上Angular.js中的文本字段

2 个答案: