javascript - AngularJS 绑定(bind)到嵌套模型属性

Question

我们构建了一个动态表单指令，该指令从服务器获取元数据，然后动态构建表单。渲染的输入绑定(bind)到与元数据分开的 Model 对象。为了实现这一目标，我们正在做这样的事情:

<input type="field.Type" 
       ng-model="Model[field.Name]" 
       ng-repeat="field in metadata.Fields" />

假设上述标记有效(嗯，它确实有效 - 在一个简单的场景中)并且绑定(bind)按预期工作。不幸的是，当我们使用的模型不是标量属性的集合时，这一切都会崩溃。示例包括:

• 测量.Id
• 维度[0].SelectedAttribute

如您所见，当我有一个嵌套属性和/或当我有一个需要绑定(bind)的列表时，就会出现问题，这显然是正常行为，因为我们使用的是 Model[propertyName ] 表示法来实现动态绑定(bind)。

我曾考虑过自己解析来自服务器的表达式，并深入模型的层次结构(嵌套属性)并找出绑定(bind)，但我(还)无法做到这一点。此外，我仍然没有想到要解决列表/数组绑定(bind)问题的时间。

有什么想法吗？

Answer 1

我不太确定您是想从模型中获取列表属性还是想创建 Dynamic Set Model ？

至于列表属性，这不是很困难，只需将数组附加到模型中，甚至附加一些具有列表属性的对象即可。

<小时/>

多种型号

或者您想使用多个“模型”？

function MyCtrl($scope, $filter) 
{        
    $scope.Model = { 
        SubModel : {
             // Submodel stuff
        },

        FooModel : {
             // Submodel stuff
        }
    }
}

编辑:

我第一次尝试完全没有捕获问题的要点。这个问题确实想根据属性的类型呈现不同的内容(如果这不是您想要的，我很抱歉)Plunker Example

HTML

<div ng-app ng-controller="MyCtrl">
  <div ng-if="Configuration.hasLevels">
    <div ng-repeat="lvl in Configuration.levels">
      <input type="textbox" value="{{lvl.severity}}">
      {{lvl.name}}
    </div>
  </div>
  <div ng-if="!Configuration.hasLevels">
    no levels: {{Configuration.levels}}
  </div>
</div>

JavaScript

function MyCtrl($scope, $filter) 
{
  // Configuration Object
  $scope.Configuration = {
    debug : true,
    // Log Levels
    levels : [
      new Level("log", 0),
      new Level("warning", 1),
      new Level("error", 2)
    ]
    // levels : "hello world"
  };

  $scope.Configuration.hasLevels = ($scope.Configuration.levels instanceof Array);
}

function Level(name, severity) { this.name = name; this.severity = severity; }