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