如何根据条件在输入上分配 ng 模型中的变量

How to assign varaible in ng-model on input based on condition

本文关键字：模型 ng 变量 分配 何根 条件 输入      更新时间：2023-09-26

我想根据条件分配ng-model变量。例如：

<input type="text" ng-model="item.model[multilang]" >

$scope.multilang可以是"ENG","JP"(languages)的，也可以是false的。例如，如果multilang = "ENG"和用户输入"Hello"，则结果将是 

item.model = {ENG:"Hello"}

问题是当$scope.multilang = false时，我希望结果是

item.model = "Hello"

我找不到达到上述结果的方法。我认为一种解决方案是基于$scope.multilang更改 ng 模型，因此当它为假时，它会将输入的 ng 模型更改为 = ng-model="item.model"但我不知道该怎么做。

编辑我想到了一个解决方案：

<input ng-if="multilang" type="text" ng-model="item.model[multilang]" >
<input ng-if="!multilang" type="text" ng-model="item.model" >

但是有更好的方法来实现吗？

-----PLNKR示例-----

Angular 是一个非常灵活和强大的框架。你应该使用自定义指令和ngModel的getter/setter选项。

没有 ngModel 的 getter/setter 的指令可能如下所示： 

<input type="text" 
       ng-model="val" 
       multilang="multilang" 
       multilang-model="item.model">

指令代码：

 .directive('multilang', [function(){
    return {
      restrict: "A",
      require: "ngModel",
      scope: {
        multilang: "=",
        multilangModel: "="
      },
      link: function(scope, element, attr, ngModel){
        ngModel.$viewChangeListeners.push(function()){
          var value = ngModel.$modelValue;
          if(scope.multilang !== false) {
            if(typeof scope.multilangModel == 'undefined')
              scope.multilangModel = Object.create(null)
            scope.multilangModel[scope.multilang] = value
          }
          else {
             scope.multilangModel = value
          }
        })
      }
    }
 }])
-

-分叉的普伦克--

在使用 ngModel 的吸气剂/二传手的情况下

<input type="text" 
       ng-model="val" 
       multilang="multilang" 
       multilang-model="item.model" 
       ng-model-options="{ getterSetter: true }">

指令代码：

 .directive('multilang', [function(){
    return {
      restrict: "A",
      scope: {
        multilang: "=",
        multilangModel: "=",
        val: "=ngModel"
      },
      link: function(scope, element, attr){
        scope.val = function(newValue) {
          if(scope.multilang !== false) {
            if(typeof scope.multilangModel == 'undefined')
              scope.multilangModel = Object.create(null)                
            return arguments.length ? (scope.multilangModel[scope.multilang] = newValue) : scope.multilangModel[scope.multilang];
          }
          else {
             return arguments.length ? (scope.multilangModel = newValue) : scope.multilangModel;
          }
        }
      }
    }
 }])
-

-分叉的普伦克--

在我看来，第二个更好。它具有与item.model的双向绑定input并在代码的其他位置更改item.model时更改值。

试试这个： 

<input ng-show="multilang" type="text" ng-model="item.model[multilang]" >
<input ng-hide="multilang" type="text" ng-model="item.model" >
相关文章：