Create function in html with angularjs

Question

Is there a way to create a function in html view. Because I have data and I used ng-repeat to diplay them in my html view. I used ng-if to display the first 15 data in the first table and the second 15 data in the second table and so on... . My concern now is I am creating a table three times and I think it's repetitive code. The 3 tables have the same code except I only changed the ng-if condition. I want a shorter code to make it reusable. Is there a way for it? Thanks.

My fiddle is here: https://jsfiddle.net/DharkRoses/kpw43k95/
sample of my code is:

 <table border=1>
    <tr ng-repeat="user in users" ng-if = "$index <= 14">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.stat}}</td>
    </tr>
</table>

Split your data in chunks in your controller. Then use 2 ng-repeat: one outer loop over the chunks which displays each chunk as a table, and one inner loop over the element of the chunk to display the rows of the table. — JB Nizet
– JB Nizet, Commented Feb 13, 2015 at 8:12

Renan Le Caro · Accepted Answer · 2015-02-13 08:21:28Z

2

The quick and dirty way :

<table border=1 ng-repeat="col in [0,1,2]">
    <tr ng-repeat="user in users" ng-if = "$index >= col*15 && $index < (col+1)*15">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.stat}}</td>
    </tr>
</table>

https://jsfiddle.net/ocuznpov/

But it will not adapt to the length of the array if you get over 15*3 items

answered Feb 13, 2015 at 8:21

Renan Le Caro

3651 silver badge8 bronze badges

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

2 Comments

Lee Lee Over a year ago

wow that is nice answer so short :-). Can you explain to me what is the purpose of this ng-repeat="col in [0,1,2]"? How the ng-if = "$index >= col*15 && $index < (col+1)*15" works? @Renan

Renan Le Caro Over a year ago

First, we repeat the table three times with ng-repeat="col in [0,1,2]". Then we get the different ranges for ng-if dependin on the col variable : for col=0, col*15 (lower limit) is 0, and (col+1)*15 is 15, so we show items of $index 0..14

Naeem Shaikh · Accepted Answer · 2015-02-13 08:17:46Z

0

You can create a directive for that, see https://jsfiddle.net/kpw43k95/1/

here I have created a directive name uiFoo, which contains the template for the table,

Directive:

    app.directive('uiFoo', 
        function() {
          return {
            restrict: 'EAC',

              template:'<td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.stat}}</td>',
            link: function($scope, element, attrs, controller) {

            }
          };
        }
      );

Html:

 <div ng-app="myApp" ng-controller="check">
        <div class = "container">
        <table border=1>
            <tr ng-repeat="user in users" ui-foo ng-if = "$index <= 14">

            </tr>
        </table>

          <table border=1 class>
            <tr ng-repeat="user in users" ui-foo ng-if = "$index > 14 && $index <=29">

            </tr>
        </table>

             <table border=1>
            <tr ng-repeat="user in users" ui-foo  ng-if = "$index > 29">

            </tr>
        </table>
    </div>
    </div>

link the template html in your directive, and you are done! its reusable.

answered Feb 13, 2015 at 8:17

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

1 Comment

Lee Lee Over a year ago

Yes you are right. . That way will be more cleaner and more reusable thank you very much

Collectives™ on Stack Overflow

Create function in html with angularjs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related