demo1

angular-js-filter.markdown

A Pen by Jyothi B N on CodePen.

License.

index.html

  <div class="container" data-ng-app="myApp" data-ng-controller="myCtrl">
    <div class="row">
      <div class="col-md-2">
        Search:
      </div>
      <div class="col-md-10">
        <input type="text" class="search" data-ng-model="table" />
      </div>
    </div>
    <br/>
    <table>
      <tr>
        <th>Name</th>
        <th>City</th>
        <th>Country</th>
      </tr>
      <tr data-ng-repeat="customer in people | filter: table">
        <td>{{customer.Name}}</td>
        <td>{{customer.City}}</td>
        <td>{{customer.Country}}</td>
      </tr>
    </table>
    <div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
  </div>

script.js

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.customers = [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
  }, {
    "Name": "Ana Trujillo Emparedados y helados",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Antonio Moreno Taquería",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Around the Horn",
    "City": "London",
    "Country": "UK"
  }, {
    "Name": "B's Beverages",
    "City": "London",
    "Country": "UK"
  }, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
  }, {
    "Name": "Blauer See Delikatessen",
    "City": "Mannheim",
    "Country": "Germany"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Bólido Comidas preparadas",
    "City": "Madrid",
    "Country": "Spain"
  }, {
    "Name": "Bon app'",
    "City": "Marseille",
    "Country": "France"
  }, {
    "Name": "Bottom-Dollar Marketse",
    "City": "Tsawassen",
    "Country": "Canada"
  }, {
    "Name": "Cactus Comidas para llevar",
    "City": "Buenos Aires",
    "Country": "Argentina"
  }, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Chop-suey Chinese",
    "City": "Bern",
    "Country": "Switzerland"
  }, {
    "Name": "Comércio Mineiro",
    "City": "São Paulo",
    "Country": "Brazil"
  }],
  $scope.people=[],
  $scope.currentPage = 1,
  $scope.numPerPage = 5,
  $scope.maxSize = 5;
  
  
  
  $scope.numPages = function () {
    return Math.ceil($scope.customers.length / $scope.numPerPage);
  };
  
  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;
    
    $scope.people = $scope.customers.slice(begin, end);
  });
  
  
});

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>

style.css

table {
    		    font-family: arial, sans-serif;
    		    border-collapse: collapse;
    		    width: 100%;
    		}
    		td, th {
    		    border: 1px solid #dddddd;
    		    text-align: left;
    		    padding: 8px;
    		}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />