Configurable Ionic directive for alphabetically indexed list with an alpha scroll bar.
#新特性（基于原版重写）
- fixed [aquint/ion-alpha-scroll#8]
- merged [aquint/ion-alpha-scroll#9]
- 支持 item 样式指定(itemStyle 属性)
- 默认用 collection-repeat 替代 ng-repeat
- 支持自定义 dividerHeight 和 itemHeight
- 支持滑动索引条定位
- 自动检测subheader与footerbar
- 添加定位时滚动的动画效果
#Table of contents
- Use bower to install the new module:
bower install ion-alpha-scroll --save- Import the
ion-alpha-scrolljavascript and css file into your HTML file:
<script src="bower_components/ion-alpha-scroll/dist/ion-alpha-scroll.js"></script>
<link href="bower_components/ion-alpha-scroll/dist/ion-alpha-scroll.css" rel="stylesheet">- Add
ion-alpha-scrollas a dependency on your Ionic app:
angular.module('myApp', [
'ionic',
'ion-alpha-scroll'
]);To use the ion-alpha-scroll directive simply add the following snippet to your template:
<ion-alpha-scroll ng-model="model" key="keyName">
Content Goes here...
</ion-alpha-scroll>where 'ng-model' is the model you would like to sort and 'key' is the name of the key you would like to sort by.
To display the properties of each item in the model, you can use the 'item' object within the directive:
<ion-alpha-scroll ng-model="model" key="keyName">
<div>Name: {{item.name}}</div>
<div>Address: {{item.address}}</div>
</ion-alpha-scroll>Heres a quick example:
services.js
angular.module('example.services', [])
.factory('Contacts', function() {
// Some fake testing data
var contacts = [
{
id: 0,
name: 'Ben Sparrow',
address: '123 Fake St.',
face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
}, {
id: 1,
name: 'Max Lynx',
address: '123 Fake St.',
face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
},{
id: 2,
name: 'Adam Bradleyson',
address: '123 Fake St.',
face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
}, {
id: 3,
name: 'Perry Governor',
address: '123 Fake St.',
face: 'https://pbs.twimg.com/profile_images/491995398135767040/ie2Z_V6e.jpeg'
}, {
id: 4,
name: 'Mike Harrington',
address: '123 Fake St.',
face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
}
...
];
return {
all: function() {
return contacts;
},
remove: function(contact) {
contacts.splice(contacts.indexOf(contact), 1);
},
get: function(contactId) {
for (var i = 0; i < contacts.length; i++) {
if (contacts[i].id === parseInt(contactId)) {
return contacts[i];
}
}
return null;
}
};
});controllers.js
angular.module('example.controllers', [])
.controller('contactsCtrl', ['$scope','Contacts',function($scope, Contacts) {
$scope.contacts = Contacts.all();
)]};contacts-list.html
<ion-view view-title="Contacts">
<ion-content>
<ion-alpha-scroll ng-model="contacts" key="name">
<div>{{item.name}}</div>
<div>{{item.description}}</div>
</ion-alpha-scroll>
</ion-content>
</ion-view>Initial inspiration and code taken from this codepen by mikelucid
The Ionic alpha-scroll directive is available under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent