根據ng-model屬性選擇模板的最佳方法是什麼？

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的這些屬性。 會員名稱是字符串且不可編輯的，應顯示爲標籤。 所有可編輯的字符串作爲文本框，所有日期類型與日期選擇器等。

我知道這可以用角度指令來完成。有一個叫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