单选按钮以及Angular.js中的文本字段 [英] Radio buttons plus a text field in Angular.js
问题描述
使用AngularJS，我想创建一个带有单选按钮的选项列表，最后一个选项的空文本字段标记为其他"，用于输入不在列表中的选项.这是我在CodePen中启动的自举的想法的证明.由于Stack Overflow坚持在此消息中包含CodePen代码，因此它是:
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:
- 当我选择除
Other以外的任何选项时，文本字段应保持空白； - 如果我将光标放在文本字段中，则应选择选项
Other - 一旦我开始在文本字段中输入内容，选项
Other应该保持选中状态 - 如果我更改注册选项的模型(在通过单击
Change color按钮实现的演示应用程序中)，则应选择相应的单选按钮.
- When I choose any option except for
Other, the text field should remain blank; - If I place cursor in the text field, the option
Othershould be selected - Once I start typing in the text field, the option
Othershould remain selected - If I change the model that registers the options (in the demo app achieved by clicking the
Change colorbutton), the corresponding radio button should be selected.
我通过使用三个模型(一个用于颜色，一个用于跟踪单选按钮，一个用于Other字段)和三个观察者来实现了大多数功能，但是
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.)
推荐答案
为其他文本添加单独的范围属性:
Add a separate scope property for the other text:
$scope.other = '';
添加一个colorChanged()方法，该方法将在更改颜色时被调用.如果颜色不是其他"，这会将其他文本设置为空:
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 = '';
}
};
这也将需要从changeColor()调用.我最终更改了changeColor，以允许传入颜色.否则默认为红色:
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();
};
将ng-change="colorChanged()"添加到单选按钮:
<input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color" ng-change="colorChanged()">
更改文本框以使用other作为模型.使用ng-focus来检测文本框何时被聚焦，然后将颜色设置为其他".这样做将选择单选按钮.
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>
这篇关于单选按钮以及Angular.js中的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
