Skip to content

Instantly share code, notes, and snippets.

@davidmaogomezz

davidmaogomezz/index.html

Created September 16, 2015 18:21
Show Gist options
  • Save davidmaogomezz/acb4f407f0044686f9c1 to your computer and use it in GitHub Desktop.
Save davidmaogomezz/acb4f407f0044686f9c1 to your computer and use it in GitHub Desktop.
Download ZIP
ionic list
Raw
index.html
<html ng-app="smb.locations">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js">
</script>
</head>
<body ng-controller="LocationListCtrl">
<ion-view title="listtest" hide-back-button="true" class="card-bg">
<ion-content has-header="true" padding="true">
<div name="locationInfo">
<ion-list class="list list-inset" style="clear: both;margin-top: 0">
<div class="item contact-list-padding">
<div class="row contact-list-padding contact-list-header-padding">
<div class="col col-33 col-center contact-list-padding contact-list-header-padding">
<div>
<span class="label">Contacts</span>
</div>
</div>
<div class="col coll-top">
<div class="row">
<div class="buttons">
<button class="button button-icon icon ion-minus-circled" ng-disabled="contacts.numActiveContacts == 0" ng-click="contacts.showDelete = !contacts.showDelete; contacts.showReorder = false"></button>
<button class="button button-icon icon ion-plus-circled" ng-disabled="!addContactEnabled" ui-sref="app.location-contact({locationId: location.id, contactId: 0})"></button>
<button class="button button-icon icon ion-drag" ng-disabled="contacts.numActiveContacts == 0" ng-click="contacts.showDelete = false; contacts.showReorder = !contacts.showReorder"></button>
</div>
</div>
</div>
</div>
</div>
<div class="item contact-list-padding">
<ion-list class="list list-inset" show-delete="contacts.showDelete" show-reorder="contacts.showReorder" can-swipe=true>
<ion-item ng-if="contacts.numActiveContacts == 0">
<div class="col col-33 col-offset-33">
<H1 class="padding-horizontal">No Contacts</H1>
</div>
</ion-item>
<ion-item ng-repeat="contact in location.emergencycontacts" ng-if="contact.seqno != 0">
<span>{{contact.name}}</span>
<ion-option-button class="button-info" ui-sref="app.location-contact({locationId: location.id, contactId: contact.id})">
Edit
</ion-option-button>
<ion-delete-button class="ion-minus-circled" ng-click="removeContact(contact, $index)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon" on-reorder="reorderContacts(contact, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
</div>
</ion-list>
</div>
</ion-content>
</ion-view>
</body>
</html>
Raw
script.js
angular.module('smb.locations', ['ionic'])
.controller('LocationListCtrl', function ($scope) {
$scope.contacts = {};
$scope.contacts.showDelete = false;
$scope.contacts.showReorder = false;
function loadLocation(location) {
$scope.location = location;
$scope.contacts.numActiveContacts = 0;
$scope.contacts.maxSeqno = 0;
for (var contactindex in $scope.location.emergencycontacts ) {
var title = $scope.location.emergencycontacts[contactindex].title ? $scope.location.emergencycontacts[contactindex].title + ' ' : '';
$scope.location.emergencycontacts[contactindex].name = title + $scope.location.emergencycontacts[contactindex].first_name + ' ' + $scope.location.emergencycontacts[contactindex].last_name;
if ( $scope.location.emergencycontacts[contactindex].seqno != 0 ) {
$scope.contacts.numActiveContacts++;
if ( $scope.location.emergencycontacts[contactindex].seqno > $scope.contacts.maxSeqno ) {
$scope.contacts.maxSeqno = $scope.location.emergencycontacts[contactindex].seqno;
}
}
}
//check if it is a new location. In new location don't allow to add contacts till the location is saved
$scope.addContactEnabled = false;
}
loadLocation({"id":"1","locationname":"home","emergencycontacts":[{"id":"7","seqno":1,"title":"Mr","last_name":"darwin","first_name":"Charles"},{"id":"8","seqno":4,"title":"Mr","last_name":"Pasteur","first_name":"Louis"},{"id":"9","seqno":6,"title":"Mr","last_name":"Fleming","first_name":"Alexander"},{"id":"10","seqno":8,"title":"Mr","last_name":"Haeckel","first_name":"Ernst"}]});
//remove a contact
$scope.removeContact = function(contact, index){
//remove item from list
$scope.location.emergencycontacts.splice(index, 1);
//set the seqno of the contact to 0 and push it at the end of the list
contact.seqno = 0;
$scope.location.emergencycontacts.push(contact);
$scope.contacts.numActiveContacts--;
};
$scope.reorderContacts = function(contact, fromIndex, toIndex){
if ( ( fromIndex != toIndex ) && ($scope.location.emergencycontacts[fromIndex] === contact)) {
$scope.location.emergencycontacts.splice(fromIndex, 1);
$scope.location.emergencycontacts.splice(toIndex, 0, contact);
//change the seqno
var startIndex, endIndex;
if ( fromIndex < toIndex ) {
startIndex = fromIndex;
endIndex = toIndex;
} else {
startIndex = toIndex;
endIndex = fromIndex;
}
//we will give the moved item the max seqno + 1 in order not to use old seqno
for (; startIndex <= endIndex; startIndex++){
if ( $scope.location.emergencycontacts[startIndex].seqno != 0 ) {
$scope.location.emergencycontacts[startIndex].seqno = $scope.contacts.maxSeqno + 1;
$scope.contacts.maxSeqno ++;
}
}
}
};
});
Raw
style.css
.contact-list-padding {
padding-top: 0px;
padding-bottom: 0px;
}
.contact-list-header-padding {
padding-left: 0px;
padding-right: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment