。:: Answer Upadated ::。

Question

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

如果我选择Other选项，则需要显示另一个文本框。我已使用ng-show获得此功能。

现在我的问题在于我的JSON结构，只有一个语言提交如下

var peopleData = {
           language : 'English'
}

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

由于我的后端开发人员不希望在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);
      },
    };
}]);

实时查看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 ...

@if(model.Names.Where(x => x.StartsWith("L").Count() != 0)
{
     @Html.ActionLink("L", "{Controller}", "{Action}", null, new {} { @class = "{NOT GRAY}"})
}
@else
{
     @Html.ActionLink("L", "{Controller}", "{Action}", null, new {} { @class = "grayed"})
}

由于文字字段仅在选择了其他选项时可见，因此我认为这样可行。

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>  <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。

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

4 个答案:

。:: Answer Upadated ::。