Skip to main content

Angular JS Table Filter and Sorting


Hi All, I am new to angular js and doing some random stuff. I am sharing the code here. Hope this will help you some where.

       
<style>

table, td  {

  border: 1px solid grey;

  border-collapse: collapse;

  padding: 5px;

}

.sortorder:after {

  content: '\25b2';

}

.sortorder.reverse:after {

  content: '\25bc';

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>



<div ng-app="myApp" ng-controller="customersCtrl">



<table>

    <tr>

        <td ng-click="order('Name')">

          Customer Name

          <span class="sortorder" ng-show="predicate === 'Name'" ng-class="{reverse:reverse}"></span>

        </td>

        <td ng-click="order('City')">

          City

          <span class="sortorder" ng-show="predicate === 'City'" ng-class="{reverse:reverse}"></span>

        </td>

        <td ng-click="order('Country')">

          Country

          <span class="sortorder" ng-show="predicate === 'Country'" ng-class="{reverse:reverse}"></span>

        </td>

    </tr>

    <tr>

        <td><input type="text" ng-model="name"></td>

        <td><input type="text" ng-model="city"></td>

        <td><input type="text" ng-model="country"></td>

    </tr>

    <tr ng-repeat="x in names | filter:name | filter:city | filter:country | orderBy: predicate:reverse">

    

        <td>

            {{ x.Name }}

        </td>

        <td>

            {{ x.City }}

        </td>

        <td>

            {{ x.Country }}

        </td>  

    </tr>

    <br/>

</table>



</div>



<script>

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

app.controller('customersCtrl', function($scope, $http) {

    // SORTS

    $scope.reverse = true;

    $scope.order = function(predicate) {

        $scope.reverse = !$scope.reverse;

        $scope.predicate = predicate;

    };

    

    $http.get("http://www.w3schools.com/angular/customers.php")

    .then(function (response) {

      $scope.names = response.data.records;

    

    });   

});

</script>
Output

Labels:

Comments

  1. Unknown17 February 2016 at 23:35

    Nice article Mohit !! Keep it up.

    ReplyDelete
    Replies
    1. Unknown4 April 2016 at 00:17

      Thanks :) Angular is a great benefit for developers and designers both

      Delete

Post a Comment

Popular posts from this blog

Magento Multiple Store Setup

Many times we need to create multiple stores in magento website. In magento we create different stores to make it more local. We can access different stores using below ways: 1) Domain (e.g. www.store1.com and www.store2.com) 2) Subdomain (e.g. store1.mystore.com and store2.mystore.com) 3) Folder (e.g. mystore.com/store1/ and mystore.com/store2/) Its all upto to you which way you prefer. For all these we need to follow below steps: Step 1: Add new Magento store: It might be possible that both store have different  catalogue so to manage this. We need to make two different Base Categories. To create a new base category follow below steps: Log in to your Magento admin panel. Go to Catalog -> Manage Categories . If you want both your websites to share same “ Default Category ”, select it by clicking on it on the left. Or click Add Root Category to create a new root category different from the existing one. Once the category is selected, under the Gene...
6 comments
Read more

Add Products to cart Programmatically in Magento

Sometimes we need to add products into cart programmatically in controller. Below is the code which you can use to add product to cart.   1) For Simple Products If you are working in magento controller and wants to add a simple product programmatically then here is the code: Suppose our product id value stored in $productId.         // Below code will create instance of cart         $cart = Mage::getModel('checkout/cart');         // This will initialize cart         $cart->init();         // Get the product collection by passing product id         $productCollection = Mage::getModel('catalog/product')->load($productId); This product collection will be required as we have to pass it at the time of adding product to cart. For adding the product we...
10 comments
Read more

Quick Order Placement Form

If we want to place fast and quick order. We want to list all the product along with their categories  and price. For achieving this goal we have to follow these steps: 1) Create Template File : Create a template  file at /app/design/frontend/default/blanco/template/catalog/product/list_fast_order.phtml which will the list of all products along with their categories and Price listing. 2) Edit Layout : Before this we have to add the phtml file in catalog.xml file. 3) Get Result :  In list_fast_order.phtml file we have to show the product category wise /*assume we want to get all products of category id 5 */ $catid_1 = 5; /*we are loading all the products from category id 5 */ $_category = Mage::getModel('catalog/category')->load($catid_1); $subs = $_category->getAllChildren(true); /* Use for loop for making result array */ $result = array(); foreach($subs as $cat_id) { $category = new Mage_Catalog_Model_...
9 comments
Read more