List filter with AngularJS

index.html

<div id="notebooks" ng-app ng-controller="NotebookListCtrl">
  <input type="text" id="query" ng-model="query"/>
  <select ng-model="orderList">
    <option value="name">By name</option>
    <option value="-age">Newest</option>
    <option value="age">Oldest</option>
  </select>
  <ul id="notebook_ul">
    <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
      name: {{notebook.name}}<br/>
      procesor: {{notebook.procesor}}<br/>
      <div class="right top">{{notebook.age}}</div>
    </li>
  </ul>
  <span>Number of notebooks: {{notebooks.length}}</span>
</div>

List filter with AngularJS.markdown

List filter with AngularJS

AngularJS list filter. That's all. :)

A Pen by Ondřej Page Bárta on CodePen.

License.

script.js

function NotebookListCtrl($scope) {
  $scope.notebooks = [
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2011},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2010},
    {"name": "Toshiba",
     "procesor": "Intel core 2 duo",
     "age": 2008},
    {"name": "HP",
     "procesor": "Intel core 2 duo",
     "age": 2012},
    {"name": "Acer",
     "procesor": "AMD",
     "age": 2006},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2009},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2008},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2011},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2010},
    {"name": "Toshiba",
     "procesor": "Intel core 2 duo",
     "age": 2008},
    {"name": "HP",
     "procesor": "Intel core 2 duo",
     "age": 2012},
    {"name": "Acer",
     "procesor": "AMD",
     "age": 2006},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2009},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2008},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2011},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2010},
    {"name": "Toshiba",
     "procesor": "Intel core 2 duo",
     "age": 2008},
    {"name": "HP",
     "procesor": "Intel core 2 duo",
     "age": 2012},
    {"name": "Acer",
     "procesor": "AMD",
     "age": 2006},
    {"name": "Lenovo",
     "procesor": "Intel i5",
     "age": 2009},
    {"name": "Toshiba",
     "procesor": "Intel i7",
     "age": 2008}
  ];
  $scope.orderList = "name";
}

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

style.css

html, body {
  height: 100%;
}

body {
  font-family: calibri light;
  margin: 0 auto;
  background: #FFFFBB;
}

.right {
  float: right;
}

.top {
  margin-top: -30px;
}

#notebooks {
  background: whitesmoke;
  position: absolute;
  left: 50%;
  margin-left: -175px;
  margin-top: 35px;
  width: 350px;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: inset 1px 1px 0 white;
  max-height: 450px;
}

ul {
  margin: 0 auto;
  padding: 0;
  max-height: 390px;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 5px 5px 0 5px;
  border-left: none;
  border-right: none;
}

li {
  list-style: none;
  background-color: rgba(0, 0, 0, 0.05);
  background-image: 
    linear-gradient(
      90deg,
      #FFD32E 10px,
      #EEE 10px,
      #EEE 11px,
      transparent 11px);
  padding: 10px 15px 10px 25px;
  border: 1px solid #CCC;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 3px;
}

#query {
  width: 100%;
  box-sizing: border-box;
  font-size: 19px;
  padding: 5px;
  font-family: calibri light;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}

#notebooks span {
  display: block;
  position: absolute;
  background: #FFD32E;
  bottom: -35px;
  left: -1px;
  width: 360px;
  border-radius: 0 0 5px 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
}

#notebooks select {
  width: 120px;
  margin-left: 230px;
  margin-top: -45px;
  border-radius: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  padding: 7.5px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

#notebooks select:focus, #query:focus {
  border: 1px solid #FFD32E;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.1);
  outline: none;
}