角度ng模型组合框与其他选项和文本框

Question

我有一个组合框ng-model='languale'.我也有一个预定义的列表'English', 'French', 'German' and 'Other'

如果我选择Other选项,则需要出现另一个文本框.我已经实现了这个功能ng-show.

现在我的问题是在我的JSON结构中,只有一个语言提交如下

var peopleData = {
           language : 'English'
}

因此,我无法ng-model='peopleData.language'在select和textbox中同名.

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

那么有什么方法可以解决这个问题吗？

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

Answer 1

.:: Answer Upadated ::.

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

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);
      },
    };
}]);

在这个PLUNKR现场看看: