Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty

AllThingsSmitty/index.htm

Last active August 29, 2015 13:57
Show Gist options
  • Save AllThingsSmitty/9691978 to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/9691978 to your computer and use it in GitHub Desktop.
Download ZIP
Experimenting with AngularJS filters
Raw
index.htm
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS application template</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open\+Sans">
</head>
<body ng-controller="MyAppController">
<div class="container">
<div class="page-header">
<h1>{{title}}</h1>
<p class="text-success">{{blurb}}</p>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<section class="panel">
<header>
<div style="float: left" class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">{{tagOrder.name}} &nbsp;<span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li ng-repeat="order in orders"><a ng-click="setOrder(order)">{{order.name}}</a></li>
</ul>
</div>
<div class="input-group">
<input ng-model="query" type="text" placeholder="Filter the list of tags" class="form-control"><span ng-click="clearFilter()" ng-disabled="query.length == 0" class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
</div>
</header>
<div class="list-group"><a href="#" ng-repeat="tag in tags | filter:query | orderBy:tagOrder.order" class="list-group-item"><span class="badge">{{tag.count}}</span>{{tag.name}}</a></div>
</section>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="live-filter.js"></script>
</body>
</html>
Raw
live-filter.css
body {
font-family: "Open Sans", sans-serif;
font-size: 1em;
}
.page-header {
border-color: #888;
}
.dropdown-menu a,
.input-group-addon {
cursor: pointer;
}
section.panel {
border: 2px solid #444;
}
header {
background-color: #ccc;
padding: 0.5em 1em;
}
Raw
live-filter.js
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('MyAppController', function($scope) {
$scope.title = 'AngularJS live filtering';
$scope.blurb = 'Experimenting with AngularJS filters';
$scope.tags = [
{ name: 'ActionScript', count: 5 },
{ name: 'C', count: 7 },
{ name: 'C#', count: 8 },
{ name: 'C++', count: 5 },
{ name: 'Clojure', count: 6 },
{ name: 'CoffeeScript', count: 1 },
{ name: 'CSS', count: 1 },
{ name: 'Go', count: 5 },
{ name: 'Haskell', count: 8 },
{ name: 'HTML', count: 1 },
{ name: 'Java', count: 10 },
{ name: 'JavaScript', count: 15 },
{ name: 'Lua', count: 7 },
{ name: 'Matlab', count: 12 },
{ name: 'Objective-C', count: 5 },
{ name: 'Perl', count: 3 },
{ name: 'PHP', count: 11 },
{ name: 'Python', count: 9 },
{ name: 'R', count: 1 },
{ name: 'Scala', count: 3 },
{ name: 'Shell', count: 1 },
{ name: 'Swift', count: 5 },
{ name: 'TeX', count: 4 },
{ name: 'VimL', count: 6
}];
$scope.orders = [
{ name: 'Name', order: 'name' },
{ name: 'Count', order: '-count' }
];
$scope.setOrder = function(order) {
$scope.tagOrder = order;
};
$scope.tagOrder = $scope.orders[0];
$scope.clearFilter = function() {
$scope.query = '';
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment