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需要一个参考和思想的Javascript对象发送的修改副本,它没有通通过引用语义,我们不能只传递一个字符串来ng-model.

但是,数组和对象确实具有此属性.因此,该解决方案是返回一个数组,其0第i个元素将是参考为ng-model.这也是hacky部分,因为所有对象现在都是带有'1'元素的数组.

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

解决方案使用嵌入对象

以下是使用嵌入式对象的解决方案:http://plnkr.co/edit/MuC4LE2YG31RdU6J6FaD？p = preview在我看来看起来更好.

因此,在您的控制器中:

$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" />

解决方案使用单元素数组

这是我能提出的最简短(尽管是hacky)的解决方案:http://plnkr.co/edit/W92cHU6SQobot8xuElcG？p = preview

因此,在您的控制器中:

$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]" />

Answer 2

@musically_ut提供的答案很好,但有一个重大缺陷:如果你正在创建一个新模型,但如果你有一个预先定义的现有模型,你不能重构为'.value'结构或者数组结构,然后你被卡住了......

显然,对我来说就是这种情况......(我认为@LorenzoMarcon的情况也是如此,因为他暗示他必须"后处理"结果并将其转换为不同的格式)

我最后详细阐述了@ musically_ut的解决方案:

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

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

    $scope.getModelLeaf = function(path) {
      var segs = path.split('.');
      return segs[segs.length-1];
    };

(注意while循环索引的变化)

稍后您将访问动态字段,如下所示:

<input ng-model="getModelParent(fieldPath)[ getModelLeaf(fieldPath) ]"/>

这个想法是(正如在@musically_ut的回答中所解释的那样)JS不能通过引用传递一个字符串,所以围绕它的黑客我传递父节点(因此'getModelParent'中的while循环在最后一个索引之前停止)并访问叶节点(来自'getModelLeaf')使用符号表示的数组.

希望这是有道理和有帮助的.