javascript - 如何根据条件在输入上分配 ngmodel 中的变量

Question

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

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

$scope.multilang 可以是"ENG"、"JP"(语言) 或false。例如，如果 multilang = "ENG" 并且用户输入 "Hello"，结果将为

item.model = {ENG:"Hello"}

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

item.model = "Hello"

我找不到实现上述结果的方法。我认为一种解决方案是基于 $scope.multilang 更改 ng-model，因此当它为 false 时，它​​将更改输入的 ng-model = 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 example-----

Answer 1

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

          }
        })
      }
    }
 }])

--forked plunkr--

如果使用 ngModel 的 getter/setter

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

          }
        }
      }
    }
 }])

--forked plunkr--

我认为第二个更好。它有两种方式与 item.model 绑定(bind)，并在代码的其他位置更改 item.model 时更改 input 值。