I have Data Like scopeFruits name 34Sapota34 rate 100 Location 34Hyderabad34 Type34Fruits34 name 34Pomogranate34 rate 70 Location 34Cumbum34 Type 34Vegetables34 name 34Apple34 rate 60 Location 34Hyderabad34 Type 34Fruits34 name 34Guvva34 rate 100 Location 34Guntur34 Type 34Vegetables34 name 34Grapes34 rate 100 Location 34V

Check this example Now please take its reference and correct your codeAngularJS doesnt include a unique filter by default You can use the one from angularfilter Just include the JavaScrip in the code and include the dependeny in your applthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltstyle type34textcss34gt body fontfamily Arial fontsize 10pt table border 1px solid ccc table th backgroundcolor F7F7F7 color 333 fontweight bold table th table td padding 5px bordercolor ccc ltstylegt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type34textjavascript34 src

Display categorized filter data in HTML Table using AngularJS

Mahesh19...

SOLVED CLOSED ACTIVE ANSWERED
User: Mahesh1986
Posted: on Jan 23, 2018 03:22 AM
Forum: Data Controls
Answer: 1
Views: 3338
Sample Code: Download

I have Data Like

 $scope.Fruits = [
        { name: "Sapota", rate: 100, Location: "Hyderabad" ,Type:"Fruits"},
        { name: "Pomogranate", rate: 70, Location: "Cumbum", Type: "Vegetables" },
        { name: "Apple", rate: 60, Location: "Hyderabad", Type: "Fruits" },
        { name: "Guvva", rate: 100, Location: "Guntur", Type: "Vegetables" },
        { name: "Grapes", rate: 100, Location: "Vizag", Type: "Fruits" },
        { name: "Pinapple", rate: 100, Location: "Vijayawada", Type: "Animals" }
    ];

Now i have to display data with type header and below that each of different items related to that type like below.

I tried with unique and filter combination but getting error.

                    <tbody ng-repeat="x in questions | unique:'Classification' track by $index">
                        <tr class="trsub-bg">
                            <td class="text-center">{{$index+1}}</td>
                            <td colspan="4"><strong>{{x.Classification}}</strong></td>
                        </tr>
                        <tr ng-repeat="question in questions | filter:x.Classification track by $index">
                            <td class="text-center">{{$parent.$index+1}}.{{$index+1}}</td>
                            <td>{{question.question}}</td>
                            <td>
                            </td>
                            <td><textarea class="form-control" rows="2" ng-model="question.comments"></textarea></td>
                        </tr>
                    </tbody>

dharmend...

0 8

Reply
ANSWER
User: dharmendr
Replied: on Jan 24, 2018 02:48 AM
Report

Check this example. Now please take its reference and correct your code.

AngularJS doesn't include a unique filter by default. You can use the one from angular-filter. Just include the JavaScrip in the code and include the dependeny in your app.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angular.filter'])
        app.controller('MyController', function ($scope, $window) {
            $scope.Fruits = [
                { name: "Sapota", rate: 100, Location: "Hyderabad", Type: "Fruits" },
                { name: "Pomogranate", rate: 70, Location: "Cumbum", Type: "Vegetables" },
                { name: "Apple", rate: 60, Location: "Hyderabad", Type: "Fruits" },
                { name: "Guvva", rate: 100, Location: "Guntur", Type: "Vegetables" },
                { name: "Grapes", rate: 100, Location: "Vizag", Type: "Fruits" },
                { name: "Pinapple", rate: 100, Location: "Vijayawada", Type: "Animals" }
            ];
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="MyApp" ng-controller="MyController">
        <table id="tblFruits" cellpadding="0" cellspacing="0">
            <tr>
                <th>
                    Sr.No.
                </th>
                <th>
                    Name
                </th>
                <th>
                    Location
                </th>
            </tr>
            <tbody ng-repeat="x in Fruits | unique: 'Type' track by $index">
                <tr class="trsub-bg">
                    <td class="text-center">
                        {{$index+1}}
                    </td>
                    <td colspan="4">
                        <strong>{{x.Type}}</strong>
                    </td>
                </tr>
                <tr ng-repeat="fruit in Fruits | filter:x.Type track by $index">
                    <td class="text-center">
                        {{$parent.$index+1}}.{{$index+1}}
                    </td>
                    <td>
                        {{fruit.name}}
                    </td>
                    <td>
                        {{fruit.Location}}
                    </td>
                    <td>
                        <textarea class="form-control" rows="2" ng-model="fruit.rate"></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

Demo

Display categorized filter data in HTML Table using AngularJS

Company

Explore

Follow us

Contact Us