0

假设我们有一个带有一些“人物属性”的人物对象

personModel = {
 membership-number : "abcd",
 name : "Anonymous",
 dob : "14/04/2009",
 avatar : "image.png"
}

假设我们有关于这些“人物属性”的元数据。

meta-data = {
 membership-number: {data-type : "string", editable : "false"},
 name : {data-type : "string", editable : "true"},
 dob : {data-type : "date", editable : "true"},
 avatar : {data-type : "image", editable : "true"}
}

现在我想在具有以下约束的页面上列出 personModel 的这些属性。成员名称是字符串且不可编辑，应显示为标签。所有可编辑的字符串作为文本框，所有带有日期选择器的日期类型等。

我知道这可以通过角度指令来完成。有一个名为 person 的指令，它将遍历 personObject 的“person-properties”。

<person ng-model={{personModel}}> </person>

并对人体内的每个“人属性”都有一个指令，例如：

<person-property ng-repeat = {{prop in person-properties}}> </person-property>

我们还假设属性指令可以访问元数据。要根据属性类型获取模板，我可以在 person-property 的定义中编写 if-else 来选择要返回的模板，例如这个骨架。

if(property_type === "date"){
   template = "<datepicker> </datepicker>"
}
else if (property-type === "numeric"){
   template = "<numeric-editable-box> </numeric-editable-box>"
}

但是有没有更优雅的方法来做到这一点？

WPF 有一个叫做 TemplateSelector 的东西来做到这一点。角度是否有类似的东西我不知道？

4

2 回答 2

1

我认为这ng-switch可能符合您的需求。打开元数据并显示适当的元素。

<div ng-switch="property_type">
  <datepicker when="date"></datepicker>
  <numeric-editable-box when="numeric"></numeric-editable-box>
</div>

ETC...

于 2012-10-11T06:44:50.727 回答
0

这是一个很好的方法。我最近写了关于这种基于数据迭代动态选择自定义指令的技术。 http://whatsthebigit.blogspot.com/2013/07/dynamic-directives-with-angular.html

于 2013-07-10T15:04:02.217 回答