基於值的每個ng-repeat中的不同模板

我有一個ng-repeat從呈現集合中的項目中獲取值。根據值的類型（即鏈接，電話號碼或文本），我希望有條件地爲渲染添加特定模板（如果是鏈接，則爲<a href，如果是電話號碼，則爲格式化數字等）。我有在HTML文件中聯模板這樣：基於值的每個ng-repeat中的不同模板

<script type="text/ng-template" id="linkValue"> 
    <a href="#/{{itemType}}/Detail/{{id}}">{{value}}</a> 
</script> 
<script type="text/ng-template" id="phoneValue"> 
    {{value | phone}} 
</script> 
<script type="text/ng-template" id="textValue"> 
    {{value}} 
</script>

我想我會用NG-包括渲染取決於值的類型的模板被渲染，但我想不出如何連線。我有

<td ng-repeat="column in columns"> 
    <span ng-include="???"></span>        
</td>

然後在我的控制器我有

$scope.renderValue = function (columnInfo, dataItem) { 
    if (columnInfo.isPhoneNumber) { 
     return phoneValue; 
    } 
    else if (columnInfo.isDetailViewLink) { 
     return linkValue 
    } 
    else { 
     return textValue 
    }    
};

我無法弄清楚如何以不同的電纜鋪設工作temaplate爲重複的每個實例NG-包括。有一個更好的方法嗎？我有這種感覺。

來源

2014-07-10 sonicblis

，但你爲什麼不使用標記與HREF ATTR？如果價值是這個，那麼url就是這個。 – micronyks

我可能會誤解你的questin，但我並不總是呈現鏈接，所以標籤並不總是存在。我不只是呈現動態鏈接，我呈現完全不同的內容，其中一些可能是鏈接。 – sonicblis

您可以構建一個使用正則表達式來確定最佳返回字符串的自定義過濾器。雖然，很可能會需要更高級的DOM操作 - 如果是這種情況，那麼我會構建一個指令，用數值解析數據模型，representationType –

我想通了wireup，你可以在this fiddle

看到的結果假設範圍具有值是這樣的：

$scope.items = [ 
    {Id: 1, Name: "One", Email: "[email protected]", PhoneNumber: "1234567", Roles: ["Admin", "Chief"]}, 
    {Id: 1, Name: "Two", Email: "[email protected]", PhoneNumber: "7572345678", Roles: ["Member"]}, 
    {Id: 1, Name: "Three", Email: "[email protected]", PhoneNumber: "3456789", Roles: ["Member", "Staff"]} 
]; 

$scope.columns = [ 
    { Title: 'Name', Property: 'Name', type: 'link' }, 
    { Title: 'Primary Email', Property: 'Email', type: 'mail' }, 
    { Title: 'Phone', Property: 'PhoneNumber', type: 'phone' }, 
    { Title: 'Roles', Property: 'Roles', type: 'array' }   
];

我可以這樣定義一個是getTemplate功能：

$scope.getTemplate = function(type){ 
    if (type) 
     return type + 'Value'; 
    else 
     return 'textValue'; 
};

通過將ng-include設置爲getTeamplate $ scope函數並返回一個匹配模板的id屬性的字符串，ng-include將加載該模板，並在其包含的控制器範圍內插入任何角標籤/內容。

<tr ng-repeat="item in items"> 
    <td ng-repeat="column in columns">     
     <span ng-include="getTemplate(column.type)"></span>     
    </td> 
</tr>

和模板被更改，以引用NG重複中，他們將被納入範圍：

<script type="text/ng-template" id="linkValue"> 
    <a href="/#">{{item[column.Property]}}</a> 
</script> 
<script type="text/ng-template" id="mailValue"> 
    <a href="mailto:{{item[column.Property]}}">{{item[column.Property]}}</a> 
</script> 
<script type="text/ng-template" id="phoneValue"> 
    {{formatAsPhone(item[column.Property])}} 
</script> 
<script type="text/ng-template" id="textValue"> 
    just a value 
</script> 
<script type="text/ng-template" id="arrayValue"> 
    {{item[column.Property].join(", ")}} 
</script>

來源

2014-07-10 17:13:05 sonicblis

基於值的每個ng-repeat中的不同模板

回答

相關問題