更新

Question

将代码提供给我的控制器：

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

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

我尝试过类似的东西，但无济于事：

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

Answer 1

更新

它没有按预期工作，值正确显示，但无法更改。 Sander here提供了正确的解决方案。

解决方案不正确

哇，不小心解决了：

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

这是Plunk。

我希望它会帮助别人。

Answer 2

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

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

结果模板的外观如何。

Luckily 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);
      } ;
  };

这将返回一个getter-setter函数，为您处理此问题。在this plunk

中查看它的实际效果

Answer 3

您可以使用括号表示法进行一些修改，因为您希望绑定到嵌套属性。您必须将路径拆分为属性：

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

控制器：

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

参见 js fiddle

Answer 4

在阅读并使用Sander Elias的回答后，我正在使用它，但遇到了另一个问题。

将结果与ng-required="true"中的<input>结合使用时，您无法清空该字段，因为当该字段为空时，newVal将作为undefined传递。

经过一些研究，我发现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上为1。

除此之外，我还将angular.isDefined()添加为Sumit suggested in a comment以保存false和空（""）值。

这是updated Plunker

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

4 个答案:

更新

解决方案不正确