/angularjs/

AngularJS - List Filter Order Example

2014-05-14 23:15:11

Code: https://github.com/szalek/AngularJS-ListFilterOrder-Example

index.html

<!DOCTYPE html>

<html lang='"en"' ng-app='"szalekApp"'>
<head>
<meta charset="utf-8"/>
<meta content='"IE=edge"' http-equiv='"X-UA-Compatible"'/>
<meta content='"width=device-width,' initial-scale='1"' name='"viewport"'/>
<title>AngularJS–ListFilterOrder-Example</title>
<link href='"bootstrap-3.1.1/css/bootstrap.min.css"' rel='"stylesheet"'/>
<!--[if lt IE 9]>
    <script src=&quot;https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js&quot;></script>
    <script src=&quot;https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js&quot;></script>
    <![endif]-->
<script src='"angular.min.js"'></script>
<script src='"app.js"'></script>
</head>
<body>
<section class='"container"' ng-controller='"ProductListCtrl"'>
<h1>{{pageTitle}}</h1>
<div class='"row"'>
<div class='"col-xs-12"'>
<btbw-product-list items='"products"'></btbw-product-list>
</div>
</div>
</section>
</body>
</html>

/tpl/product-list.tpl.html


<table class='"table' table-condensed&quot;="">
<thead>
<tr>
<th>
<a 'name';="" =="" href='""' ng-click='"sortField' reverse='!reverse"'>Name</a>
</th>
<th>
<a 'description';="" =="" href='""' ng-click='"sortField' reverse='!reverse"'>Description</a>
</th>
<th>
<a 'price';="" =="" href='""' ng-click='"sortField' reverse='!reverse"'>Price</a>
</th>
<th>
<a 'quality';="" =="" href='""' ng-click='"sortField' reverse='!reverse"'>Quality</a>
</th>
</tr>
<tr>
<th><input class='"form-control"' ng-model='"queryName.name"' type='"text"/'/></th>
<th><input class='"form-control"' ng-model='"queryName.description"' type='"text"/'/></th>
<th><input class='"form-control"' ng-model='"queryName.price"' type='"text"/'/></th>
<th><input class='"form-control"' ng-model='"queryName.quality"' type='"text"/'/></th>
</tr>
</thead>
<tbody>
<tr filter:queryname="" in="" items="" ng-repeat='"item' orderby:sortfield:reverse&quot;="" |="">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.price}}</td>
<td>{{item.quality}}</td>
</tr>
</tbody>
</table>

var app = angular.module('szalekApp', []);

app
    .controller("ProductListCtrl", function ($scope, $http) {

        $scope.pageTitle = "Products List";

        $http.get('products.json').success(function (data) {
            $scope.products = data;
        });

    })
    .directive('btbwProductList', function () {
        return {
            restrict: 'E',
            scope: {
                items: '=items'
            },
            templateUrl: 'tpl/product-list.tpl.html'
        };
    });
;

products.json

[
    {
        "name": "Item 1",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        "price": "12.1",
        "quality": "2"
    },
    {
        "name": "Item 2",
        "description": "Aliquam viverra, neque a dapibus rutrum,.",
        "price": "9.2",
        "quality": "2"
    },
    {
        "name": "Item 3",
        "description": "Praesent suscipit sollicitudin odio.",
        "price": "25.2",
        "quality": "3"
    },
    {
        "name": "Item 4",
        "description": "am vitae mauris cursus diam congue interdum non eget risus.",
        "price": "3.9",
        "quality": "3"
    },
    {
        "name": "Item 5",
        "description": "Curabitur et bibendum lectus.",
        "price": "7.4",
        "quality": "4"
    },
    {
        "name": "Item 6",
        "description": "Suspendisse semper, urna a pharetra iaculis.",
        "price": "19.2",
        "quality": "4"
    }
]