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

Sla*_* II 9 javascript angularjs angular-ngmodel

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

$scope.entity = {
  firstName: 'Jack',
  lastName: 'Bauer',
  location: {
    city: 'New York'
  }
};
$scope.path = 'location.city';
Run Code Online (Sandbox Code Playgroud)

如何动态绑定ngModelentity指定的属性path

我尝试过类似的东西,但无济于事:

<input ng-model="'entity.' + path">
Run Code Online (Sandbox Code Playgroud)

Sla*_* II 7

更新

它没有按预期工作,值正确显示,但无法更改.Sander 在这里提供了正确的解决方案.


解决方案不正确

哇,意外地解决了:

<input type="text" ng-model="$eval('entity.' + path)">
Run Code Online (Sandbox Code Playgroud)

而这就是普兰克.

我希望它能帮助别人.


小智 7

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

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

这就是生成的模板的外观.

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);
      } ;
  };
Run Code Online (Sandbox Code Playgroud)

这将返回一个getter-setter函数,为您处理此问题.在这个插件中看到它的实际效果

  • 我要做的一件事是使用`if(angular.isDefined(newVal)) {}`,因此也分配空值,例如`false`或`""` (2认同)