Question

我有一个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的每个实例以不同方式连接temaplate。有一个更好的方法吗？我感觉到了。

Answer 1

我想出了连线，你可以在this fiddle

看到结果

假设范围具有如下值：

$scope.items = [
    {Id: 1, Name: "One", Email: "one@domain.com", PhoneNumber: "1234567", Roles: ["Admin", "Chief"]},
    {Id: 1, Name: "Two", Email: "two@domain.com", PhoneNumber: "7572345678", Roles: ["Member"]},
    {Id: 1, Name: "Three", Email: "three@domain.com", 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>

每个ng-repeat中的不同模板基于值

1 个答案: