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

2023年1月7日 214次阅读

使用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>

这是我想要这个演示应用程序做的事情：

>当我选择除“其他”以外的任何选项时,文本字段应保持空白;
>如果我将光标放在文本字段中,则应选择其他选项
>一旦我开始在文本字段中键入,选项“其他”应保持选中状态
>如果我更改了注册选项的模型(在通过单击“更改颜色”按钮实现的演示应用程序中),则应选择相应的单选按钮.

我通过使用三个模型(一个用于颜色,一个用于跟踪单选按钮和一个用于其他字段)和三个观察者来实现大部分功能,但resultant app似乎很脆弱并且未通过一些测试.你能否建议一个更好的方法来使用尽可能少的模型和观察者在Angular中创建这样的选择器？

(我的问题有点类似于this问题,但我希望不同,不要被视为重复.)

最佳答案 为其他文本添加单独的范围属性：

$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()">

更改文本框以使用其他作为模型.使用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

点赞