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>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <body ng-app="jsbin">
  <div ng-controller="DemoCtrl as demo">
    <input type='text' ng-model='demo.searchText' placeholder='Search'>
​
    <div ng-repeat="char in demo.characters | filter: demo.showCharacter | orderBy: 'checked' | limitTo: 5">
      <input type='checkbox' ng-model="char.checked" id='{{ char.id }}'>
      <span>{{ char.name }}</span>
     </div>
  </div>
</body>
</html>
 
var app = angular.module('jsbin', []);
​
app.controller('DemoCtrl', function($scope) {
  this.characters =  [
    { id: 1, name: "Dexter"},
    { id: 2, name: "Harry"},
    { id: 3, name: "Ronald" },
    { id: 4, name: "Ginny" },
    { id: 5, name: "Tom" },
    { id: 6, name: "Hermione" },
    { id: 7, name: "Severus" },
    { id: 8, name: "Marvolo" },
    { id: 9, name: "Sirius" }
  ];
  
  this.searchText = '';
  
  this.showCharacter = function(character) {
    if (character.checked) {
      return true;
    }
    if (_.startsWith(character.name, this.searchText)) {
      return true;
    } else {
      return false;
    }
  }.bind(this);
  
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers