最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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.

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.

Share Improve this question edited May 22, 2014 at 9:32 Nisham Mahsin asked May 22, 2014 at 8:38 Nisham MahsinNisham Mahsin 1,3995 gold badges19 silver badges44 bronze badges 3
  • 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 Commented May 22, 2014 at 9:39
  • i want all td from a particular date. i donno am using the propr way – 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 Commented May 22, 2014 at 9:54
Add a ment  | 

2 Answers 2

Reset to default 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

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.

发布评论

评论列表(0)

  1. 暂无评论