Radio buttons plus a text field in Angular.js

Question

Using AngularJS, I would like to create a list of options with radio buttons, the last of which has an empty text field labeled 'Other' for inputing an option that is not in the list. Here's a demonstration of what I have in mind that I bootstrapped in CodePen. Since Stack Overflow insists on including CodePen code in this message, here it is:

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>

Here is what I want this demo app to do:

When I choose any option except for Other, the text field should remain blank;
If I place cursor in the text field, the option Other should be selected
Once I start typing in the text field, the option Other should remain selected
If I change the model that registers the options (in the demo app achieved by clicking the Change color button), the corresponding radio button should be selected.

I achieved most of that functionality by using three models (one for color, one for keeping track of radio buttons and one for the Other field) and three watchers, but the resultant app seems brittle and fails some of the tests. Could you please suggest a better way for creating such a selector in Angular using as few models and watchers as possible?

(My question is somewhat similar to this SO question, but I hope is different enough not to be considered a duplicate.)

Wayne Ellery · Accepted Answer · 2018-05-14 01:59:41Z

3

Add a separate scope property for the other text:

$scope.other = '';

Add a colorChanged() method which will be called when the color is changed. This will set the other text to empty if color is not 'Other':

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

This will also need to be called from changeColor(). I ended up changing changeColor to allow the color to be passed in. It otherwise defaults to red:

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

Add ng-change="colorChanged()" to radio button:

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

Change the textbox to use other as the model. Use ng-focus to detect when textbox is focused and then set color to 'Other'. Doing this will select the radio button.

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

Update the display of the color to show the other text:

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

Plunkr

edited May 14, 2018 at 1:59

answered Jan 18, 2015 at 3:27

Wayne Ellery

7,9581 gold badge30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

azangru Over a year ago

So nice, and simple, and clean! :-)

Wayne Ellery Over a year ago

Thanks. Did my solution end up solving your problem? If so please select my answer as the solution.

bluetoft · Accepted Answer · 2015-01-18 03:40:53Z

0

I made some very small modifications to your pen HERE.

The short of it is, instead of having 'Other' as a value, i made it a blank option, with the input actually controlling the value.

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

html:

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

This allows the input to actually control the value of 'Other'...

answered Jan 18, 2015 at 3:40

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

1 Comment

Wayne Ellery Over a year ago

The other should really only text in it if the color is other

Collectives™ on Stack Overflow

Radio buttons plus a text field in Angular.js

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related