Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="MyController">
    <div>
        <h3>Table 1 (filtered by 't')</h3>
        <div data-ab-table data-items='items' data-search-keywords='"t"'></div>
        
        <h3>Table 2 (filtered by 'v')</h3>
        <div data-ab-table data-items='items' data-search-keywords='"v"'></div> 
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
  <script>
    var app = angular.module('app', [])
    .controller('MyController', function($scope) {
      $scope.items = [
        {id:1, value: 'test1'},
        {id:2, value: 'test2'},
        {id:3, value: 'test3'},
        {id:4, value: 'value4'},
        {id:5, value: 'value5'}
      ];      
    })
    .directive('abTable', function($filter){
      return {
        restrict: "A",
        replace: true,
        scope: {
          items: '=items',
          searchKeywords: '=searchKeywords' 
        },
        template: '<table><tr data-ng-repeat="item in filteredItems"><td>{{item.id}}</td><td>{{item.value}}</td></tr></table>',
        controller: function ($scope, $filter) {
          $scope.filteredItems = [];
​
            $scope.$watch('items', function () {
              $scope.search();
            });
​
            $scope.search = function () {
              $scope.filteredItems = $filter("filter")($scope.items, $scope.searchKeywords);
            }
        }
      };
    })
  </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jerradepro
0viewers