Question

我需要根据对象属性制作ng-repeat和switch标签。只有表格元素，因此我无法将<div ng-repeat>放在<tr>和<td>之间。像这样：

 <tr>
    <td ng-repeat="value in param.values" ng-switch on="value.type">
       <a ng-switch-when="text">{{value.name}}</a>
       <input ng-switch-when="input" type="text" placeholder="{{value.name}}">
       <a ng-switch-when="relocate_here" ng-click="relocate(value.urlTo)">{{value.name}}</a>
    </td>
 </tr>

但没有<a>标记。像这样的东西

<tr>
    <td ng-repeat="value in param.values" ng-switch on="value.type">
       {{value.name}}//if value=="text"
       <input ng-switch-when="input" type="text" placeholder="{{value.name}}">//if value=="input"
       {{value.name}}//like the first one if value=="relocate_here" but <td> must have directive ng-click="relocate(value.urlTo)"
    </td>
 </tr>

请给我一些建议，对不起我的英语。

Answer 1

您可以在Angular表达式中使用三元运算符，如下所示：

＆＃13;

<tr>
    <td ng-repeat="value in param.values" ng-switch on="value.type">
       {{ value.type == "text" ? value.name: "" }}//if value=="text"
       <input ng-switch-when="input" type="text" placeholder="{{value.name}}">//if value=="input"
       {{ value.type == "relocate_here" ? value.name: ""}}//like the first one if value=="relocate_here" but <td> must have directive ng-click="relocate(value.urlTo)"
    </td>
 </tr>

＆＃13;

Answer 2

我相信这可以完成你在没有在表格中添加任何额外嵌套元素的情况下尝试做的事情。

    <tr>
        <td ng-repeat="value in param.values" ng-click="value.type == 'relocate_here' ? relocate(value.urlTo) : null">
            {{value.type == "text" || value.type == "relocate_here" ? value.name : ""}}
            <input ng-if="value.type == 'input'" type="text" placeholder="{{value.name}}">
        </td>
    </tr>

以及我用它的数据：

    $scope.param = {
        values: [{
            type: "text",
            name: "a text value"
        }, {
            type: "input",
            name: "an input value"
        }, {
            type: "relocate_here",
            name: "a url value",
            urlTo: "http://stackoverflow.com"
        }]
    };

<td>内的第一行在您需要时打印名称，或者为了避免使用ng-if或ng-switch并使用嵌套元素来清空字符串。 <td>将始终具有ng-click属性，但如果不是网址类型，则它将是无操作。

angularjs：仅使用表格标签的ng-repeat（tr和td）

2 个答案: