kazekagegaara/Ionic-UL-search-example.markdown

## index.html
<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>Sample UL</title>

    <link href="http://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/0.9.22/js/ionic.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/angular/angular.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script>
  </head>

  <body ng-controller="sampleController">

    <header-bar title="'Sample UL'" type="bar-positive"></header-bar>

    <content has-header="true" padding="true" scroll="false">
      <button class="button button-block button-positive">
      Sample Button
    </button>
      <div style="height:250px">
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="Search" ng-model="searchText">
        </label>
        <scroll direction="y">
        <ul class="list">
          <li ng-repeat="data in sampleData | filter:searchText">{{data.key}}</li>
      </ul>
    </scroll>

    </content>

  </body>
</html>

## Ionic-UL-search-example.markdown

      
    Raw
  

              Ionic-UL-search-example.markdown
            
          
    Ionic UL search example

Sample Ionic code for searching in a UL.
A Pen by Manit Singh Kalsi on CodePen.
License.

  
## script.js
angular.module('ionicApp', ['ionic','sampleController'])

angular.module('sampleController', [])

.controller('sampleController', function($scope,$ionicScrollDelegate) {
  $scope.sampleData = [{'key':'one'},
                       {'key':'two'},
                       {'key':'three'},
                       {'key':'four'},
                       {'key':'five'},
                       {'key':'six'},
                       {'key':'seven'},
                       {'key':'eight'},
                       {'key':'nine'},
                       {'key':'ten'},
                       {'key':'eleven'},
                       {'key':'twelve'}];

  $scope.$watch('searchText',function(value){
    console.log(value);
  });

  $ionicScrollDelegate.scrollTop(false);
})

.directive('scrollBackListToTop', function() {
   return function (scope, element, attrs) {
        console.log(element);
      };
});


## style.css
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

.scroll-view
{
  height: 100%;
}
	<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>Sample UL</title>

	<link href="http://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet">
	<script src="http://code.ionicframework.com/0.9.22/js/ionic.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/angular/angular.min.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script>
	<script src="http://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script>
	</head>

	<body ng-controller="sampleController">

	<header-bar title="'Sample UL'" type="bar-positive"></header-bar>

	<content has-header="true" padding="true" scroll="false">
	<button class="button button-block button-positive">
	Sample Button
	</button>
	<div style="height:250px">
	<label class="item item-input">
	<i class="icon ion-search placeholder-icon"></i>
	<input type="text" placeholder="Search" ng-model="searchText">
	</label>
	<scroll direction="y">
	<ul class="list">
	<li ng-repeat="data in sampleData \| filter:searchText">{{data.key}}</li>
	</ul>
	</scroll>

	</content>

	</body>
	</html>
	angular.module('ionicApp', ['ionic','sampleController'])

	angular.module('sampleController', [])

	.controller('sampleController', function($scope,$ionicScrollDelegate) {
	$scope.sampleData = [{'key':'one'},
	{'key':'two'},
	{'key':'three'},
	{'key':'four'},
	{'key':'five'},
	{'key':'six'},
	{'key':'seven'},
	{'key':'eight'},
	{'key':'nine'},
	{'key':'ten'},
	{'key':'eleven'},
	{'key':'twelve'}];

	$scope.$watch('searchText',function(value){
	console.log(value);
	});

	$ionicScrollDelegate.scrollTop(false);
	})

	.directive('scrollBackListToTop', function() {
	return function (scope, element, attrs) {
	console.log(element);
	};
	});
	body {
	cursor: url('http://ionicframework.com/img/finger.png'), auto;
	}

	.scroll-view
	{
	height: 100%;
	}