我正在学习Angular.作为练习,我正在转换使用jQuery的现有应用程序来使用Angular.
在我的页面上,我有两个输入.一个是组合框;另一个是文本输入.
当用户更改组合框中的选择时,除非用户在组合框中选择名为“自定义”的条目,否则文本输入将填充用户选择的文本.当用户选择“自定义”时,文本输入被清除,焦点自动移动到文本输入,供用户键入自定义值.
每当用户手动将焦点移动到文本输入并键入某些内容时,组合框的值将自动更改为“自定义”.
在Angular中进行此操作的适当方法是什么？
我想如果我有两个相同的文本输入,我可以将它们绑定到同一个模型,但这是不同的.我猜我必须捕获事件并手动更新模型,但我想听听更多有经验的人的意见.
解决方法
您可以在控制器中的$watch中包含一些逻辑,或者更喜欢ng-click和ng-change等指令.
我认为Nikos Paraskevopoulos的答案很好,但它并没有真正回答你关于聚焦/清除输入的问题.
这是我可能实现这一目标的一种方式.首先是HTML模板.
<input type="text"
ng-model="vm.selected.value"
ng-change="vm.inputChanged()"
focus-when-empty>
<select ng-model="vm.selected.option"
ng-change="vm.selectionChanged()"
ng-options="option for option in vm.options">
</select>
这很清楚.有单独的文本输入和选择模型,一些可供选择的选项和两个ng-change处理程序.控制器可能是这样的
app.controller('MainController',function() {
var vm = this;
// your options to select from
vm.options = ['custom','one','two','three'];
// current text input value and dropdown selection
vm.selected = {
value: null,option: null
};
// handle text input
vm.inputChanged = function() {
var index = vm.options.indexOf(vm.selected.value);
vm.selected.option = index > 0 ? vm.options[index] : vm.options[0];
};
// handle dropdown
vm.selectionChanged = function() {
var index = vm.options.indexOf(vm.selected.option);
vm.selected.value = index > 0 ? vm.selected.option : null;
};
});
选择“自定义”时,专注于文本输入,有点棘手,所以它通过简单的focus-when-empty指令来处理.
app.directive('focusWhenEmpty',function() {
return {
restrict: 'A',scope: {
ngModel: '='
},link: function(scope,element) {
// if there is no model,focus on element
scope.$watch('ngModel',function(value) {
if (!value) {
element[0].focus();
}
});
}
};
});
另外,如果您在选项中键入任何值,则会相应地更新选择(因此它不再是“自定义”).
这是相关的plunker,希望它有所帮助！ http://plnkr.co/edit/uJeV5L
