javascript - 如何通过点分隔路径动态分配 ngmodel

Question

我见过几个与此类似的问题，但我的问题略有不同。

我的 Controller 上有一个看起来像这样的对象:

$scope.data = {
  foo: {bar: 1,
        bas: 2},
  biz: 3,
  blat: 4
};

我想创建一个输入，可以将其 ng-model 动态分配给任何这些值。

<label>Define Model</label>
<input type="text" ng-model="input.model" />

<label>Data for {{input.model}}:</label>
<input type="text" ng-model="{{input.model}}">

理想情况下，这将允许我将“定义模型”输入设置为诸如 data.foo.bas 之类的内容，并且“data.foo.bas 的数据”输入的值为 2。

我知道我可以做这样的事情:

<label>Define Model</label>
<input type="text" ng-model="input.model" />

<label>Data for {{input.model}}:</label>
<input type="text" ng-model="data[input.model]">

但这只允许我访问 biz 和 blat 属性。有谁知道如何做到这一点？谢谢。

Answer 1

您可以使用$parse

$scope.$watch('input.model', function(newVal) {
    $scope.definedModel = $parse(newVal)($scope.data);
});

这里$parse尝试匹配来自$scope.data的值并将其与defineModel绑定(bind)

演示 plunker