Различные шаблоны в каждом ng-repeat в зависимости от значения

У меня есть ng-repeat, который отображает значения из элементов коллекции. В зависимости от типа значения (например, ссылка, номер телефона или текст) я хочу условно добавить определенный шаблон для рендеринга (<a href, если это ссылка, отформатированный номер, если это номер телефона и т. д.). У меня есть встроенные шаблоны в html-файле как таковые:

<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-include для рендеринга шаблона в зависимости от типа отображаемого значения, но я не могу понять, как его подключить. у меня есть

<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
    }               
};

Я не могу понять, как по-разному подключить шаблон для каждого экземпляра повторяющегося ng-include. Есть лучший способ это сделать? Я чувствую, что есть.


angularjs angularjs-ng-repeat angularjs-ng-include
person sonicblis    schedule 10.07.2014    source источник
comment
но почему бы вам не использовать тег ‹a› с атрибутом href? если значение это, то URL это.   -  person micronyks    schedule 10.07.2014
comment
Я могу неправильно понять ваш квест, но я не всегда отображаю ссылки, поэтому тег ‹a› не всегда будет присутствовать. Я не просто отображаю динамические ссылки, я отображаю совершенно другой контент, некоторые из которых могут быть ссылками.   -  person sonicblis    schedule 10.07.2014
comment
Вы можете создать собственный фильтр, который использует регулярное выражение для определения наилучшей возвращаемой строки. Хотя вполне вероятно, что потребуются более продвинутые манипуляции с DOM — если это так, то я бы создал директиву, которая анализирует модель данных со значением,presentationType   -  person Cory Silva    schedule 10.07.2014
comment
Да, я определенно не хочу html в контроллере. В этом вся суть. знак равно   -  person sonicblis    schedule 10.07.2014

Ответы (1)


arrow_upward
3
arrow_downward

Я разобрался с проводкой, и вы можете увидеть результат на этой скрипте

Предполагая, что область действия имеет что-то вроде этого:

$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-repeat, в которую они должны были быть включены:

<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>
person sonicblis    schedule 10.07.2014