locked
Show/Hide Column value dynamically in ng-repeat Grid in AngularJS RRS feed

  • Question

  • User-864681547 posted

    I have order and product based application. i used AngularJS and WebAPI DB First approach in this app.

    Whenever i select any Customer from Drop down it will display Order List in Grid with View, Edit and Delete button.

    My Query is :

    When my Order fetched i want to Compare date in my AngularJS file and if my Order Date < Current Date then Delete button is not visible in particular that row not in whole column.

    But i can not hid/show delete button in ng-repeat (Grid). It will hide all value from column.

    JS :

     for (var i = 0; i < $scope.OrderList.length; i++) {
                    var OrderDate = $scope.OrderList[i].OrderDate;
                    OrderDate = $filter('date')(OrderDate, 'MM/dd/yyyy');
                    CurrentDate = $filter('date')(CurrentDate, 'MM/dd/yyyy');
                    if (OrderDate < CurrentDate) {
                        $scope.IsDelete = true;
                    }
                    else {
                        $scope.IsDelete = false;
                    }
                }

    HTML :

      <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Order Date</th>
                            <th>Order#</th>
                            <th>Total Amount</th>
                            <th>Paid Amount</th>
                            <th>Balnce Due</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tr ng-repeat="obj in OrderList">
                        <td>{{obj.OrderDate | date : MM/dd/yyyy}}</td>
                        <td>{{obj.OrderNo}}</td>
                        <td>{{obj.TotalAmount}}</td>
                        <td>{{obj.PaidAmount}}</td>
                        <td>{{obj.BalnceDue}}</td>
                        <td>
                            <i ng-click="ViewOrderDetail(obj)" class="glyphicon glyphicon-search"></i></td>
                        <td>
                            <i  ng-click="EditOrder(obj)" class="glyphicon glyphicon-edit"></i>
                        </td>
                        <td>
                            <i ng-hide ="IsDelete" ng-click="DeleteProduct(obj)" class="glyphicon glyphicon-trash"></i>
                        </td>
                    </tr>
                </table>

    Can anyone please answer this?

    We can not hide value of column in Angular JS when we used ng-repeate to bind grid ?

    Wednesday, July 13, 2016 9:27 AM

Answers

  • User61956409 posted

    Hi Ankita Hansawala,

    You could try to store rows’ show/hide status in a array, and specify value of ng-hide based on each item of status array. The following sample is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            var app = angular.module('myapp', []);
    
            app.controller('MyCtrl', function ($scope) {
                $scope.OrderList = [{ "ID": 1, "Name": "Name1" }, { "ID": 2, "Name": "Name2" }, { "ID": 3, "Name": "Name1" }];
    
                $scope.isdellist = [];
    
                for (var i = 0; i < $scope.OrderList.length; i++) {
                    if ($scope.OrderList[i].Name == "Name1") {
                        $scope.isdellist.push(true);
                    }
                    else {
                        $scope.isdellist.push(false);
                    }
                }
            })
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div ng-app="myapp" ng-controller="MyCtrl">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tr ng-repeat="obj in OrderList">
                        <td>{{obj.ID}}</td>
                        <td>{{obj.Name}}</td>
                        <td>
                            <i class="glyphicon glyphicon-search">Search</i></td>
                        <td>
                            <i class="glyphicon glyphicon-edit">Edit</i>
                        </td>
                        <td>
                            <i ng-hide="isdellist[{{$index}}]" class="glyphicon glyphicon-trash">Delete</i>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 14, 2016 9:37 AM