angularjs – Angular ng-model组合框与其他选项和文本框

发布时间：2020-12-17 17:46:14 所属栏目：安全来源：网络整理

导读：我有一个ng-model =’languale’的组合框.我也有一个预定义的列表,让我们说“英语”,“法语”,“德语”和“其他” 如果我选择其他选项,则需要显示另一个文本框.我用ng-show实现了这个功能. 现在我的问题是在我的JSON结构中,只有一个语言提交如下 var peopleD

我有一个ng-model =’languale’的组合框.我也有一个预定义的列表,让我们说“英语”,“法语”,“德语”和“其他”

如果我选择其他选项,则需要显示另一个文本框.我用ng-show实现了这个功能.

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

var peopleData = {
           language : 'English'
}

所以我无法在select和textbox中给出与ng-model =’peopleData.language’相同的名称.

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

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

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

解决方法

.:: 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：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!