AngularJs (ng-repeat tr) + (ng-repeat td) + (ng-switch td) +(ng-repeat x)

Question

     <tr ng-repeat="rows in DATA1">
            <INEEDSOMETAG ng-repeat="(key,part) in rows" ng-switch on="key">

                <td ng-switch-when="ABCD" ng-repeat="piece in part">{{piece}}</td>
                <td ng-switch-default>{{part}}</td>

            </INEEDSOMETAG>
      </tr>

this information is parsed from a json object which one of the 'parts' is another object and i need to iterate through that but display them as another 'td'.

obviously one way to go would be to provide some sort of dynamic tag if thats possible ('INEEDSOMETAG')

json below:

{obj1:  {
        ABCD:{
                x:'x',
                y:'y'
                },
        a:'a',
        b:'b',
        c:'c',
        d:'d',
    },

obj2:{
        ABCD:{
                z:'x',
                f:'y'
                },
        a:'a',
        b:'b',
        c:'c',
        d:'d',
    },

}

added a jsfiddle: http://jsfiddle.net/kDF5L/1/

Everywhere you look in angular docs and tutorials, custom tags are used. Appears you haven't read the docs much. What happens when you try with the exact same markup you have now? Provide a demo in jsfiddle.net or plunker — charlietfl, Nov 11 '13 at 11:38
I understand what you are saying however it is failing to work between the 'tr' and the 'td' attribute as within a 'tr' only 'td' is allowed and other tags ignored by the browser right? - p.s. i have read through documentation over the past week and still don't have a solution — LOGMD, Nov 11 '13 at 12:23
OK...very simple directive to pass in your `td` s as template, and use `replace:true`. I was actually wondering about that ...browsers hate invalid nesting in tables — charlietfl, Nov 11 '13 at 12:33
I would put this switching/repeating logic into the controller. Add a method returning all the cells to display for the current row, and iterate over the result of this method. The controller will do the switch, and return the appropriate list. — JB Nizet, Nov 11 '13 at 12:33
really all you need is a filter on the td repeater data. If you clean up demo so it doesn't break the minute page loads, and data fits expressions...would help more — charlietfl, Nov 11 '13 at 12:41

score 0 · Answer 1 · edited May 23 '17 at 12:05

A couple issues to begin with:

Your <span> tags aren't properly balanced; they all end with </td>.
$scope.js isn't valid Javascript. An object must contain key/value pairs, so I think you should use an array of objects instead.

If you really wanted to go this way (and as the commentators suggest, this doesn't look like the most Angular approach to accomplishing whatever you're trying to do) - I've made a JSFiddle that demonstrates how you can make the code start doing something.

If you're still interested in making a custom element like <i-need-some-tag> (I'm assuming you wouldn't need to at this point, although knowing how to do this is pretty fundamental to the framework), you need write a custom directive. How to do that is sort of beyond the scope of this question, but there's a lot of resources on Stack Overflow, Google, and the AngularJS docs on how to do this. You'd start out with something like this:

.directive("INeedSomeTag", function() {
    return {
        restrict: 'E', // used like <i-need-some-tag>
        replace: true,
        template: `<td>...</td>` 
    }
});

And like charlietfl said, you might be able to pass in the <td> elements into the directive definition object's template property.

AngularJs (ng-repeat tr) + (ng-repeat td) + (ng-switch td) +(ng-repeat x)

1 Answers1