How to hide <td>s in angularjs in particular rows when using ng-repeat

Question

I have a table and and many <td>s in first <tr> </tr> i am using ng-repeat

  <tr ng-repeat="receipt in $data">
   <td   data-title="voucher number">
    <span>{{receipt.voucher_no}}</span> 
   </td>
    <td   data-title="voucher date" sortable="'voucher_date'" filter="{'voucher_date': 'text' }">
    <span>{{receipt.voucher_date}}</span> 
   </td>
    <td   data-title="voucher Amount">
    <span>{{receipt.voucher_amount}}</span> 
   </td> 
  </tr>

i have also json data like

{
    "data": [
        {
            "voucher_no": "2",
            "voucher_amount": "100",
            "voucher_date": "2014-05-04",
      },
        {
            "voucher_no": "3",
            "voucher_amount": "1000000",
            "voucher_date": "2014-02-05",
        },
        {
            "voucher_no": "4",
            "voucher_amount": "50000",
            "voucher_date": "2014-02-05",
        },
        .
        .
        .
        .
        {
            "total": 1360100
        }
    ]
}

please note that for final data there is only one field 'total'.

so for all the row i want to print 3 <td>s except the in final row.

What do you want that filter to do? At the moment it will show only the voucher_date columns which contain the word 'text'. — Catalin MUNTEANU
– Catalin MUNTEANU, Commented May 22, 2014 at 9:39
i want all td from a particular date. i donno am using the propr way — Nisham Mahsin
– Nisham Mahsin, Commented May 22, 2014 at 9:49
Well using the filter property on the td will only hide that td. I guess you need to hide the entire row if the date is not valid. I've updated my answer with a valid filter for this case. — Catalin MUNTEANU
– Catalin MUNTEANU, Commented May 22, 2014 at 9:54

Catalin MUNTEANU · Accepted Answer · 2014-05-22 10:02:56Z

5

<tr ng-repeat="receipt in $data | filter:{voucher_date: '2014-05-04'}">
    <!-- Voucher No -->
    <td ng-if="!$last"
        data-title="voucher number">
        <span>{{receipt.voucher_no}}</span> 
    </td>

    <!-- Voucher Date -->
    <td ng-if="!$last"
        data-title="voucher date">
         <span>{{receipt.voucher_date}}</span> 
    </td>

    <!-- Voucher Amount -->
    <td ng-if="!$last"
        data-title="voucher Amount">
        <span>{{receipt.voucher_amount}}</span> 
    </td>

    <!-- Total Column -->
    <td ng-if="$last"
        colspan="3"
        data-title="Total">
        <span>{{receipt.total}}</span> 
    </td>
</tr>

The above filter will only show the records for which the date is equal to the specified date.

If you want to show all the records between two dates you will need to specify a function as the filter: | filter:filter_between_date and in your controller you have to create that function:

$scope.from_date = '2014-05-04'; // 04 May
$scope.to_date = '2014-05-10'; // 10 May
$scope.filter_between_date = function(item) {
    var item_date = new Date(item.voucher_date).getTime();

    if(item_date >= (new Date($scope.from_date).getTime()) &&
        item_date <= (new Date($scope.to_date).getTime()) {
        return true;
    }

    return false;
};

Angular filter docs

Angular ngIf directive docs

Angular ngRepeat $last property

edited May 22, 2014 at 10:02

answered May 22, 2014 at 8:47

Catalin MUNTEANU

5,6442 gold badges37 silver badges43 bronze badges

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

3 Comments

Nisham Mahsin Over a year ago

it works but but i have to filter the <td> .when i am filtering that is missing <td sortable="'voucher_date'" filter="{ 'voucher_date': 'text' } >.... </td>

Catalin MUNTEANU Over a year ago

Could you please update your question so that it also contains details about this filter?!

germanio Over a year ago

Please have in mind there is a difference between ng-if and ng-hide: "The ngIf directive removes or recreates a portion of the DOM tree" "The ngHide directive shows or hides the given HTML element" In the first case, the DOM element is actually removed, while in the second case, that element is present but hidden with CSS.

AlexHv · Accepted Answer · 2014-05-22 08:41:53Z

2

Use :

  <tr ng-repeat="receipt in $data">
   <td   data-title="voucher number" ng-hide="$index == $data.length - 1">
    <span>{{receipt.voucher_no}}</span> 
   </td>
    <td   data-title="voucher date" ng-hide="$index == $data.length - 1">
    <span>{{receipt.voucher_date}}</span> 
   </td>
    <td   data-title="voucher Amount">
    <span>{{receipt.voucher_amount}}</span> 
   </td> 
  </tr>

The $index variable stores the position of the repeated element in the original list.

answered May 22, 2014 at 8:41

AlexHv

1,73415 silver badges24 bronze badges

4 Comments

mer10z_tech Over a year ago

You can use ng-repeats $last variable instead of comparing index to data.length: docs.angularjs.org/api/ng/directive/ngRepeat

AlexHv Over a year ago

Thanks mer10z_tech, I didn't know that one !

Nisham Mahsin Over a year ago

is $last variable holds the last field of the row or last row?

AlexHv Over a year ago

$last is "true if the repeated element is last in the iterator." docs.angularjs.org/api/ng/directive/ngRepeat

Collectives™ on Stack Overflow

How to hide <td>s in angularjs in particular rows when using ng-repeat

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related