angularjs - 带有其他选项和文本框的 Angular ng-model 组合框

Question

我有一个带有 ng-model='languale' 的组合框.我还有一个预定义的列表，比如 'English', 'French', 'German' and 'Other'
如果我选择 Other选项然后需要出现另一个文本框。我已经通过 ng-show 实现了这个功能.

现在我的问题是在我的 JSON 结构中，只有一种语言如下

var peopleData = {
           language : 'English'
}

所以我不能给出与 ng-model='peopleData.language' 相同的名字在选择和文本框中。

由于我的后端开发人员不想在 JSON 中添加额外的属性。所以我必须以不同的方式处理它。我不想在向服务发送数据时编写任何逻辑(创建或操作 JSON 结构)。

那么有没有办法解决这个问题呢？

注:我知道我可以使用 $scope.$watch但我仍然在寻找更好的解决方案，例如完全从自身 Angular 处理，否则可能是性能问题。

Answer 1

.::答案更新::.

写一个简单的指令怎么样？

HTML:

<select ng-model="ctrl.main" f-model="peopleData.language" ng-options="i as i for i in langs"></select>
<input type="text" ng-model="ctrl.extra" f-model="peopleData.language" ng-if="ctrl.main == 'Other'">

JS:

app.directive('fModel', [function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        fModel: '='
      },
      link: function(scope, element, attrs, ngModel) {

        var handler = function(val) {
          var newVal = angular.copy(val || scope.fModel || '');
          scope.$applyAsync(function() {
            scope.fModel = newVal;
          });
          return newVal;
        }

        ngModel.$parsers.push(handler);
        ngModel.$formatters.push(handler);
      },
    };
}]);

现场查看 IN THIS PLUNKR :