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

Question

我有一个带有 ng-model='languale' 的组合框。我还有一个预定义列表，比如 'English', 'French', 'German' and 'Other'

如果我 select Other 选项则需要出现另一个文本框。我已经通过 ng-show.

实现了此功能

现在我的问题出在我的JSON结构中，只有一个语言字段如下

var peopleData = {
           language : 'English'
}

所以我无法在 select 和文本框中给出与 ng-model='peopleData.language' 相同的名称。

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

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

注意：我知道我可以使用$scope.$watch但我仍然在寻找更好的解决方案，比如从视图中完全处理它自己，否则它可能是性能问题。

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:

Answer 2

我认为可以通过

解决问题

在控制器中

$scope.languale = ['English', 'French', 'German' and 'Other'];

可见

<select ng-model="people.language" ng-options="lan in languale" ng-selected="lan==people.language"></select>

Answer 3

您可以在文本字段中使用 ng-change...

<input type="text" ng-model="otherLang" ng-change="peopleData.language=otherLang">

因为文本字段只有在选择了其他选项时才可见，所以我认为这会起作用。

http://embed.plnkr.co/pN04eXuDCCoR0Z8qhX4h/

Answer 4

查看：

<div ng-app="app">
  <div ng-controller="Ctrl">
    <select ng-model="peopleData.language" ng-options="item for item in languages"></select>
    
    <!-- Show input when selected language is Other -->
    <input type="text" ng-model="inputValue" ng-show="peopleData.language === 'Other'"/>

  </div>
</div>

JS:

angular.module('app', [])
  .controller('Ctrl',  
    function ($scope) {
      $scope.inputValue = '';
  
      // Languages list
      $scope.languages = ['English', 'French', 'German', 'Other'];
     
      // Selected language
      $scope.peopleData = {
        language : 'English'
      };
    }
  );

演示：Here!

注意：使用 ng-show 将在选择任何语言时保留输入的值，它只是隐藏，而不是从 DOM 中删除。如果要重置输入值，请在这种情况下使用 ng-if。

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

Angular ng-model combobox with other option and a textbox

angularjs

angular-ngmodel

.:: 答案已更新 ::.