| <html ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <title>Hidden Search Box</title> | |
| <link href="http://code.ionicframework.com/0.9.26/css/ionic.css" rel="stylesheet"> | |
| <script src="http://code.ionicframework.com/0.9.26/js/ionic.bundle.js"></script> | |
| </head> | |
| <body ng-controller="AppCtrl"> | |
| <ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar> | |
| <ion-content | |
| start-y="55" | |
| padding="false" | |
| has-tabs="true" | |
| has-header="true" | |
| > | |
| <div id="search-box" class="bar bar-header item-input-inset"> | |
| <div class="item-input-wrapper"> | |
| <i class="icon ion-ios7-search placeholder-icon"></i> | |
| <input type="search" placeholder="Search" ng-model="data.searchQuery"> | |
| <i class="clear-search icon ion-ios7-close-empty" ng-click="clearSearch()"></i> | |
| </div> | |
| <button class="button button-clear"> | |
| Cancel | |
| </button> | |
| </div> | |
| <ul class="list"> | |
| <li class="item" ng-repeat="item in items | filter: data.searchQuery">{{item.text}}</li> | |
| </ul> | |
| </ion-content> | |
| </body> | |
| </html> |
| angular.module('ionicApp', ['ionic']) | |
| .controller('AppCtrl', function($scope) { | |
| $scope.data = {}; | |
| $scope.items = [ | |
| { price: '$4.99', text: 'Pizza' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| { price: '$2.99', text: 'Burger' }, | |
| { price: '$3.99', text: 'Pasta' }, | |
| ]; | |
| $scope.clearSearch = function() { | |
| $scope.data.searchQuery = ''; | |
| }; | |
| }); |
| body { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
| } | |
| .clear-search { | |
| font-size: 18px; | |
| } |