GitHub_angular.js: 10230

Illustration of comment to https://github.com/angular/angular.js/issues/10230.

by ExpertSystem

HTML

<script src="http://code.angularjs.org/1.3.4/angular.min.js"></script>
<div ng-controller="mainCtrl">
    <label>
        Filter by number of posts:
        <input type="number" ng-model="search.posts" />
    </label>
    {{search | json}}
    <hr />
    <table>
        <tr><th>Name</th><th>Posts</th></tr>
        <tr ng-repeat="user in users | filter:((search.posts===null)?undefined:search):true">
            <td>{{user.name}}</td>
            <td>{{user.posts}}</td>
        </tr>
    </table>
</div>

<!-- -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- -->
<!-- Page Footer -->
<small class="footer" ng-controller="footerCtrl">
    <b>Angular v{{version.full}}</b> ({{version.codeName}})
    <span class="right">
        &copy;
        <a ng-href="{{author.url}}" target="_blank">{{author.name}}</a>
    </span>
</small>

CSS

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
body { padding-bottom: 22px; }
.footer { background-color: White; border-top: 1px solid rgba(100, 100, 100, 0.33); bottom: 0; display: block; font-size: 0.75em; height: 20px; left: 0; margin: 0 5px; overflow: auto; padding: 5px; position: fixed; right: 0; }
.right { float: right; }

JavaScript

var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
    $scope.users = [
        {name: 'Me', posts: 10},
        {name: 'You', posts: 7}
    ];
});

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
app.controller('footerCtrl', function ($scope) {
    $scope.version = angular.version;
    $scope.author  = {
        name: 'GKalpak',
        url:  '//github.com/gkalpak'
    };
});