angularjs: ng-repeat using only table tags(tr and td)

Question

I need to make ng-repeat and switch tags depending on object attributes. Only table elements, so I can't put <div ng-repeat> between <tr> and <td>. Like this:

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

but without <a> tag. Something like that

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

Please, give me some advice about that and sorry for my english.

Anvay · Accepted Answer · 2017-06-01 12:16:44Z

1

You can do this by using a ternary operator inside the Angular expression such as the following:

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

answered Jun 1, 2017 at 12:16

Anvay

3451 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kliukovking Over a year ago

Thank you for answer. Solved the problem using ternary operator. :)

adashrod · Accepted Answer · 2017-06-01 12:17:12Z

0

I believe this accomplishes what you're trying to do without adding any extra nested elements inside the table.

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

and the data that I used with it:

    $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"
        }]
    };

The first line inside the <td> prints the name when you need it or empty string otherwise to avoid using an ng-if or ng-switch and having nested elements. The <td> will always have an ng-click attribute, but when not a url type, it will be a no-op.

answered Jun 1, 2017 at 12:17

adashrod

5102 silver badges13 bronze badges

1 Comment

kliukovking Over a year ago

Thank you very much!! Thats what I need!)

Collectives™ on Stack Overflow

angularjs: ng-repeat using only table tags(tr and td)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related