如何在ng-model中基于条件对输入赋值

I want to assign ng-model variable based on condition. For example:

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

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

$scope.multilang can be "ENG","JP"(languages) or false. For example, if multilang = "ENG" and user type in input "Hello",the result will be

美元的范围。multilang可以是“ENG”、“JP”(语言)或“false”。例如，如果multilang = "ENG"和用户输入"Hello"，结果将是

item.model = {ENG:"Hello"}

The problem is when $scope.multilang = false , I want the result would be

问题是当$scope。multilang = false，我想要结果。

item.model = "Hello"

I can't find a way to achieve above result. I think one solution is changing ng-model based on $scope.multilang so when it's false,it will change ng-model of input to be = ng-model="item.model" but I don't know how to do this.

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

EDITED I thought of one solution:

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

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

but there is better way to achieve ?

但是有更好的方法去实现吗?

-----plnkr example-----

- - - - - - - - - - - -plnkr例子

2 个解决方案

#1

Angular is very flexible and powerful framework. You should use custom directive and ngModel's getter/setter option.

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

Directive without ngModel's getter/setter may look like this:

没有ngModel的getter/setter的指令可能是这样的:

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

Directive code:

指令代码:

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

——叉形plunkr

In case of using ngModel's getter/setter

如果使用ngModel的getter/setter

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

Directive code:

指令代码:

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

——叉形plunkr

In my opinion, second one is better. It has two way binding with item.model and changes input value when item.model was changed in other place of code.

在我看来，第二个更好。它有两种与物品绑定的方式。建模并更改项目时的输入值。模型在代码的其他地方被更改。

#2

Try this:

试试这个:

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