index.html
- "js/mine.js", "ng-app=ionicApp" 그리고 body 안에 있는 html 태그를 제외하고는 모두 ionic 프로젝트 생성 시 기본으로 생성되는 내용입니다.
<!DOCTYPE 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></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- <link href="lib/ionic/css/ionicons.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/mine.js"></script>
</head>
<body>
<ion-tabs class="tabs-icon-bottom tabs-icon-only">
<ion-tab ng-controller="friends" title="친구" icon-on="ion-person" icon-off="ion-person">
<ion-header-bar class="bar-dark">
<a class="button button-clear button-white" ng-click="toggleEdit()">{{data.status}}</a>
<h1 class="title">친구</h1>
<a class="button button-clear button-white">
<i class="icon ion-person-add"></i>
</a>
</ion-header-bar>
<ion-content>
<ion-list show-delete="data.showDelete">
<ion-item ng-repeat="item in items" item="item">
{{item.name}}
<ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"></ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="채팅" icon-on="ion-chatbubble" icon-off="ion-chatbubble">
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title="채널" icon-on="ion-ios-list" icon-off="ion-ios-list">
<!-- Tab 3 content -->
</ion-tab>
<ion-tab title="더보기" icon-on="ion-more" icon-off="ion-more">
<!-- Tab 4 content -->
</ion-tab>
</ion-tabs>
</body>
</html>
js/mine.js
- Android 기기에서는 Tab의 위치가 기본으로 Top 으로 지정이 되고 iOS 에서는 Bottom 으로 지정이 되는 것을 항상 Bottom 으로 지정이 되도록 하였습니다.
- 그리고 친구 리스트를 편집/완료 할 수 있는 기능을 추가 하였습니다.
# js/mine.js
angular.module('ionicApp', ['ionic'])
.config(function($ionicConfigProvider) {
// 모든 OS 에서 Tab의 위치를 Bottom 으로 지정
$ionicConfigProvider.tabs.position("bottom");
$ionicConfigProvider.tabs.style("standard");
})
.controller('friends', function($scope) {
$scope.data = {
status: '편집',
showDelete: false
};
$scope.items = [
{name: '친구1'},
{name: '친구2'}
];
$scope.toggleEdit = function() {
$scope.data.status = $scope.data.showDelete === false ? '완료' : '편집';
$scope.data.showDelete = $scope.data.showDelete === false ? true : false;
};
$scope.onItemDelete = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
})
;
결과
