angularjs – 如何使Angular保持两个字段同步？

我认为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