Question

我想根据条件分配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-model，所以如果它是错误的，它会将输入的ng-model更改为= ng-model="item.model"但我不知道如何这样做。

EDITED 我想到了一个解决方案：

<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

试试这个：

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

Answer 2

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具有双向绑定，并且在其他代码位置更改input时会更改item.model值。

如何根据条件在输入中分配变量的ng-model

2 个答案: