使用 AngularJS，我想创建一个带有单选按钮的选项列表，最后一个按钮有一个标记为“其他”的空文本字段，用于输入不在列表中的选项。这是我的想法的演示在 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场）和三个观察者，但是生成的应用程序看起来很脆弱并且无法通过一些测试。您能否建议一种更好的方法，使用尽可能少的模型和观察者在 Angular 中创建这样的选择器？
（我的问题有点类似于this所以问题，但我希望足够不同，不被认为是重复的。）
为其他文本添加单独的范围属性：
$scope.other = '';
Add a colorChanged()颜色改变时将调用的方法。如果颜色不是“其他”，这会将其他文本设置为空：
$scope.colorChanged = function () {
if ($scope.color != 'Other') {
$scope.other = '';
}
};
这也需要从调用changeColor()。我最终改变了changeColor允许传入颜色。否则默认为红色：
$scope.changeColor = function(color){
$scope.color = color || "Red";
$scope.colorChanged();
};
Add ng-change="colorChanged()"到单选按钮：
<input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color" ng-change="colorChanged()">
更改要使用的文本框other作为模型。使用 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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
