angularjs - Radio buttons plus a text field in Angular.js -
using angularjs, create list of options radio buttons, last of has empty text field labeled 'other' inputing option not in list. here's demonstration of have in mind bootstrapped in codepen. since stack overflow insists on including codepen code in message, here 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> chosen color <strong>{{color}}</strong> <p></p> <button ng-click="changecolor()">change color</button> </body> </html> here want demo app do:
- when choose option except
other, text field should remain blank; - if place cursor in text field, option
othershould selected - once start typing in text field, option
othershould remain selected - if change model registers options (in demo app achieved clicking
change colorbutton), corresponding radio button should selected.
i achieved of functionality using 3 models (one color, 1 keeping track of radio buttons , 1 other field) , 3 watchers, resultant app seems brittle , fails of tests. please suggest better way creating such selector in angular using few models , watchers possible?
(my question similar this question, hope different enough not considered duplicate.)
add separate scope property other text:
$scope.other = ''; add colorchanged() method called when color changed. set other text empty if color not 'other':
$scope.colorchanged = function () { if ($scope.color != 'other') { $scope.other = ''; } }; this need called changecolor(). ended changing changecolor allow color passed in. otherwise defaults red:
$scope.changecolor = function(color){ $scope.color = color || "red"; $scope.colorchanged(); }; add ng-change="colorchanged()" radio button:
<input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color" ng-change="colorchanged()"> change textbox use other model. use ng-focus detect when textbox focused , set color 'other'. doing select radio button.
<input type="text" ng-model="$parent.other" ng-show="color=='other'" ng-focus="$parent.color = 'other'"/> update display of color show other text:
the chosen color <strong>{{color}}<span ng-if="color === 'other' && other != ''"> - {{other}}</span></strong>
Comments
Post a Comment