在 Angular.js 中使用 ngModel 中的表达式

Question

在我的控制器中提供代码：

$scope.entity = {
  firstName: 'Jack',
  lastName: 'Bauer',
  location: {
    city: 'New York'
  }
};
$scope.path = 'location.city';

如何将 ngModel 动态绑定到 path 指定的 entity 的属性？

我试过类似的方法，但无济于事：

<input ng-model="'entity.' + path">

Answer 1

您可以稍微修改一下括号表示法，因为您想要绑定到嵌套的属性。您必须将 path 拆分为属性:

<input ng-model="entity[locationKey][cityKey]"/>

控制器：

$scope.locationKey = 'location';
$scope.cityKey = 'city';

见js fiddle

Answer 2

更新

它没有按预期工作，值显示正确，但无法更改。 Sander .

提供了正确的解决方案

不正确的解决方案

哇，不小心解决了：

<input type="text" ng-model="$eval('entity.' + path)">

这是 Plunk。

希望对大家有所帮助。

Answer 3

Slava，我不太确定这是否是一个好主意。但无论如何，您需要通过将此属性添加到您的输入 ng-model-options="{ getterSetter: true } 来让您的模型 getterSetter 知道。然后你需要在你的控制器中使用一个函数来构建一个 getterSetter out of a sting。

<input type="text" ng-model="propertify('entity.' + path)" ng-model-options="{ getterSetter: true }">

这就是生成的模板的样子。

幸运的是 angular 有一个 $parse 服务，可以让这变得容易得多。所以像这样的东西需要在你的控制器中，或者在注入服务中更好。

  $scope.propertify = function (string) {
      var p = $parse(string);
      var s = p.assign;
      return function(newVal) {
          if (newVal) {
              s($scope,newVal);
          }
          return p($scope);
      } ;
  };

这将 return 一个 getter-setter 函数来为您处理这个问题。在 this plunk

中查看实际效果

Answer 4

阅读并使用 Sander Elias 的回答后，我正在使用它，但运行进入另一个问题。

在 <input> 中将他的结果与 ng-required="true" 合并时，您不能清空该字段，因为当该字段为空时，newVal 将作为 [=14= 传递].

经过更多研究，我发现 an isssue on GitHub 解决了这个问题。

这是 Sander 和 GitHub 的综合答案：

$scope.propertify = function (string) {
    var property = $parse(string);
    var propAssign = property.assign;
    return function (newVal) {
        if (arguments.length) {
            newVal = angular.isDefined(newVal)?  newVal : '';
            propAssign($scope, newVal);
        }
        return property($scope);
    };
};

argument.length 反映了传递给 getter/setter 的值的数量，在 get 上为 0，在 set 上为 1。

除此之外，我将 angular.isDefined() 添加为以保存 false 和空值 ("")。

这是一个updated Plunker

在 Angular.js 中使用 ngModel 中的表达式

Using expressions in ngModel in Angular.js

javascript

angularjs

angular-ngmodel

更新

不正确的解决方案