javascript - AngularJS:来自动态设置模型名称的嵌套对象

Question

我有一个包含变量名的数组，例如:

var names = ['address.street','address.city'];

我想用这些创建输入字段，我正在使用 AngularJS。没什么大不了的:

<div ng-repeat="n in names">
    <input type="text" ng-model="data[n]" />
</div>

生成的 $scope.data 对象是:

{
    "address.street" : ...,
    "address.city" : ...
}

顺便说一下，这并不是我想要实现的目标。是否有一种语法可以将我引向如下所示的对象？

{
    "address" : {
        "street" : ...,
        "city" : ...
    }
}

请考虑我可以有不止一层的嵌套，这只是一个例子。

Answer 1

我认为不应该以这种方式访问​​模型。

但是，这是个奇怪的问题，解决方案也很有趣。

问题是 ng-model 需要一个 reference 并且认为 Javascript 发送对象的可修改副本，它 does not have pass-by-reference semantics我们不能只将 string 传递给 ng-model。

但是，数组和对象确实具有此属性。因此，解决方案是返回一个数组，其第 0 个元素将作为 ng-model 的 reference。这也是 hacky 部分，因为您的所有对象现在都是包含“1”元素的数组。

另一种解决方案是为每个案例返回一个对象，而不是 1 个元素数组。

使用嵌入式对象的解决方案

这是使用嵌入 对象的解决方案:http://plnkr.co/edit/MuC4LE2YG31RdU6J6FaD?p=preview在我看来，这看起来更好。

因此，在您的 Controller 中:

$scope.getModel = function(path) {
  var segs = path.split('.');
  var root = $scope.data;

  while (segs.length > 0) {
    var pathStep = segs.shift();
    if (typeof root[pathStep] === 'undefined') {
      root[pathStep] = segs.length === 0 ? { value:  '' } : {};
    }
    root = root[pathStep];
  }
  return root;
}

在你的模板中:

<p>Hello {{data.person.name.value}}!</p>
<p>Address: {{data.address.value}}</p>
<input ng-model="getModel('person.name').value" />
<input ng-model="getModel('address').value" />

使用单元素数组的解决方案

这是我能想出的最短(虽然有点老套)的解决方案:http://plnkr.co/edit/W92cHU6SQobot8xuElcG?p=preview

因此，在您的 Controller 中:

$scope.getModel = function(path) {
  var segs = path.split('.');
  var root = $scope.data;

  while (segs.length > 0) {
    var pathStep = segs.shift();
    if (typeof root[pathStep] === 'undefined') {
      root[pathStep] = segs.length === 0 ? [ '' ] : {};
    }
    root = root[pathStep];
  }
  return root;
}

在你的模板中:

<p>Hello {{data.person.name[0]}}!</p>
<p>Address: {{data.address[0]}}</p>
<input ng-model="getModel('person.name')[0]" />
<input ng-model="getModel('address')[0]" />