Mobile Application _PhoneBook

e1

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">

<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">FRIEND LIST</h1>
</ion-header-bar>
<ion-content ng-controller="MyCon">

<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="PEOPLE_FILTER">
</label>
</div>

<ion-list ng-repeat="item in PEOPLE_LIST | filter: {NAME:PEOPLE_FILTER} | orderBy:'NAME'">
<div class="item item-thumbnail-left">
<img src="{{item.IMG}}">
<h2> {{item.NAME}} </h2>
<h2> {{item.FULL_NAME}} </h2>
<p> {{item.PHONE}} </p>
<a href="tel:{{item.MOBILE}}">
<p><i class="icon ion-iphone"></i>
{{item.MOBILE}} </p>
</a>
<a href="mailto:{{item.EMAIL}}">
<i class="icon ion-email"></i>
{{item.EMAIL}}
</a>
</div>
</ion-list>

</ion-content>
</ion-pane>
</body>
</html>

------------------------------------------
App.js

// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller("MyCon", function($scope) {
$scope.PEOPLE_LIST = [
{ID: 1,IMG :'img/t1.jpg',NAME: 'Tee', FULL_NAME : 'SOMPOACH Kultrararom',PHONE : '02-665 3777 ต่อ 6760',MOBILE : '089-923-2933',EMAIL : 'somppoach.k@rmutp.ac.th'},
{ID: 2,IMG :'img/best.jpg',NAME: 'Best', FULL_NAME : 'PAMOK Rattranatriyapibal', PHONE : '02-665 3777 ต่อ 6783',MOBILE : '',EMAIL : 'pamok.r@rmutp.ac.th'},
{ID: 3,IMG :'img/nop.jpg',NAME: 'Nop', FULL_NAME : 'NOPPHANUN Netsakulnee',PHONE : '02-665 3777 ต่อ 6764',MOBILE : '',EMAIL : 'nopphanun.n@rmutp.ac.th'},
{ID: 4,IMG :'img/pa.jpg',NAME: 'Pla', FULL_NAME : 'NALUMON Thocharoen', PHONE : '02-665 3777 ต่อ 6763',MOBILE : '',EMAIL : 'nalumon.t@rmutp.ac.th'},
{ID: 5,IMG :'img/pang.jpg',NAME: 'Pang', FULL_NAME : 'SARINYA Keowsim',PHONE : '02-665 3777 ต่อ 6766',MOBILE : '',EMAIL : 'sarinya.k@rmutp.ac.th'},
{ID: 6,IMG :'img/mo.jpg',NAME: 'Mo', FULL_NAME : 'MANISSORN Damnoi',PHONE : '02-665 3777 ต่อ ...',MOBILE : '',EMAIL : 'manissorn.d@rmutp.ac.th'},
{ID: 7,IMG :'img/meow.jpg',NAME: 'meow', FULL_NAME : 'PETCHARAPORN Petchkeaw',PHONE : '02-665 3777 ต่อ 6764',MOBILE : '0817022578',EMAIL : 'meow@rmutp.ac.th'},

{ID: 1,IMG :'img/ya.jpg',NAME: 'Ya', FULL_NAME : 'SUKUNYA Pisitamorchai',PHONE : '02-665 3777 ต่อ 6791',MOBILE : '',EMAIL : 'Sukunya.p@rmutp.ac.th'},
{ID: 2,IMG :'img/ooy.jpg',NAME: 'Ooy', FULL_NAME : 'OOYJARIYA Plubjeen', PHONE : '02-665 3777 ต่อ 6790',MOBILE : '',EMAIL : 'Ooyjariya.p@rmutp.ac.th'},
{ID: 3,IMG :'img/tun.jpg',NAME: 'Tun', FULL_NAME : 'RATCHANEE Torgern',PHONE : '02-665 3777 ต่อ 6762',MOBILE : '',EMAIL : 'Rachanee@rmutp.ac.th'},
{ID: 4,IMG :'img/umah.jpg',NAME: 'Umah', FULL_NAM :'UMAPORN Sroulsrun', PHONE : '02-665 3777 ต่อ 6767',MOBILE : '',EMAIL : 'Umaporn.s@rmutp.ac.th'},
{ID: 5,IMG :'img/tung.jpg',NAME: 'Tung', FULL_NAME : 'SAKON Phomchantra',PHONE : '02-665 3777 ต่อ 6761',MOBILE : '',EMAIL : 'RachaneeSakon.p@rmutp.ac.th'},
{ID: 6,IMG :'img/yok.jpg',NAME: 'Yok', FULL_NAME : 'THANYAPORN Pisitamornchai',PHONE : '02-665 3777 ต่อ 6799',MOBILE : '',EMAIL : 'Thanyapron.p@rmutp.ac.th'},
{ID: 7,IMG :'img/kate.jpg',NAME: 'Kate', FULL_NAME : 'SOPINYA Nakonkun',PHONE : '02-665 3777 ต่อ 6771',MOBILE : '',EMAIL : 'Sopinya.n@rmutp.ac.th'}
];
});

copy รูปใส่ไว้ใน folder img

c5

Bookmark the permalink.

Comments are closed.