Properly formatting a table using Angular's ng-repeat

Question

I'm working in the AngularJS environment.

I have the following table of chart images which I'm converting to an ng-repeat.

I've managed to assign ONLY those records I want to display but using GadgetIconsCtrl below. Now I need to display two <td> elements per row.

How do I display two <td> elements per row using ng-repeat ?

<table id="gadgets" class="propertyTable clickable_row">

        <tr>
            <th>Type</th>
        </tr>
        <tr>
            <td data-url="chart_treelist">
                <img data-draggable id="chart_treelist" src="images2/table.png" title="Tree Grid" alt="Hierarchy Grid" width="64" height="64">Grid
            </td>   
            <td data-url="{chart_pivot}">
                <img data-draggable id="chart_pivot" src="images2/pivottable.png" title="Pivot Table"   alt="Pivot Table" width="64" height="64">Pivot
            </td> 
        </tr>
              
    </table>

When the user launches the modal window in which this table is embedded,so I need to immediately highlight a specific <td> element.

Here's an example of a few $scope.widgets chart properties:

$scope.widgets[0].title = "Bar Chart" $scope.widgets[0].gadgetType = "chart" $scope.widgets[0].chartType = "bar" So far I'm working with ng-repeat, but having trouble appying the filter

Here's the ng-repeat and the controller attached to it:

(function () {
    'use strict';
    angular.module('rage')
       .controller('GadgetIconsCtrl', ['$rootScope', '$scope',  icons]);

    function icons($rootScope, $scope) {

        var gadicons = this;

        gadicons.widgetSubset = null;

        if ($scope.widget.gadgetType == 'chart' && $scope.widget.chartType == 'bar') {
            gadicons.widgetSubset = _.filter($scope.widgetDefs, function (item) {
                return item.chartType == 'bar' || item.chartType == 'column';
            });
        }
    };   // end of gridSettings()    
})();

        <table ng-controller="GadgetIconsCtrl as gadicons">
            <tr ng-repeat="widget in gadicons.widgetSubset" ng-class="" >
                <td>
                    <img data-draggable ng-src="{{widget.initImage}}" title="{{widget.title}}" alt="Hierarchy Grid" width="64" height="64">{{widget.title}}
                </td>
            </tr>
        </table>

Your advice is greatly appreciated.

regards, Bob

Create a directive on the table and set the cell classes from inside directive using a watch on the widgets object — charlietfl
– charlietfl, Commented Apr 9, 2015 at 23:10
you can have all those values in an array and use ng-repeat that way you would not need to add on every line. — batmaniac7
– batmaniac7, Commented Apr 9, 2015 at 23:15
You also shouldn't be mixing jquery selectors with angular. That's poor practice. — Steve
– Steve, Commented Apr 14, 2015 at 18:28
typically, when using a filter you can filter by a model. For example, you have a model='name' and then you have a ng-repeat. You can do <div ng-repeat="word in words | filter:name"</div> which will filter out the text you input. you can see an example here on my site with a bunch of words steveorrichio.com/games/w4w/#/dictionary for you situation, you should make the filter... .... filter:widgets[0].gadgetType — Steve
– Steve, Commented Apr 14, 2015 at 20:01

Steve · Accepted Answer · 2015-04-14 20:24:45Z

1

Sorry I gave a wrong answer before. So, you want to change the filter type depending on your scope. Here is a working rudimentary fiddle that should help you abstract your answer. If you want more angular help, if you're interested, shoot me an email from on my site and I'd love to talk more about angular.

working fiddle https://jsfiddle.net/E6aMZ/26/

<div ng-repeat"thing in things | filter:myThings"></div>

edited Apr 14, 2015 at 20:24

answered Apr 14, 2015 at 20:12

Steve

2761 silver badge10 bronze badges

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

3 Comments

bob.mazzo Over a year ago

I'm going for the controller approach in place of filter, where I will just load an object of the exact records I need. Then I'll load that object on the ng-repeat. I'll post my final result later. thank you.

bob.mazzo Over a year ago

current problem is: how do I display two <td> elements per row using ng-repeat ?

Steve Over a year ago

to display only 2 per row, there is a limitTo:<number> parameter too so, ng-repeat=" |limitTo:2 | filter:<filter>" should do the trick. and you can do nested repeats if necessary

Collectives™ on Stack Overflow

Properly formatting a table using Angular's ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related