Question

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

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的这些属性。 member-ship name是字符串且不可编辑的，应显示为标签。所有可编辑的字符串都作为文本框，所有日期类型都带有日期选择器等

我知道这可以用angular指令完成。有一个名为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的东西来执行此操作。角度是否有类似于我不知道的东西？

Answer 1

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

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

等...

Answer 2

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

哪个是基于ng-model属性选择模板的最佳方法？

2 个答案: