Angular 原质化风格的联系人列表+自动完成搜索功能

Angular Material Contact Chips 可用于移动邮件客户端应用。

angular, list

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2542
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    'use strict';
    var myapp = angular.module('MyApp', []);
    myapp.controller('ContactChipDemoCtrl', DemoCtrl);

function DemoCtrl($timeout, $q) {
        var self = this;

self.querySearch = querySearch;
        self.allContacts = loadContacts();
        self.contacts = [self.allContacts[0]];
        self.filterSelected = true;

/**
         * Search for contacts.
         */
        function querySearch(query) {
            var results = query ?
                self.allContacts.filter(createFilterFor(query)) : [];
            return results;
        }

/**
         * Create filter function for a query string
         */
        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

return function filterFn(contact) {
                return (contact._lowername.indexOf(lowercaseQuery) != -1);;
            };

}

function loadContacts() {
            var contacts = [
                'Marina Augustine',
                'Oddr Sarno',
                'Nick Giannopoulos',
                'Narayana Garner',
                'Anita Gros',
                'Megan Smith',
                'Tsvetko Metzger',
                'Hector Simek',
                'Some-guy withalongalastaname'
            ];

return contacts.map(function(c, index) {
                var cParts = c.split(' ');
                var contact = {
                    name: c,
                    email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '@example.com',
                    image: 'http://lorempixel.com/50/50/people?' + index
                };
                contact._lowername = contact.name.toLowerCase();
                return contact;
            });
        }
    }
})();

编译

CSS

.chipsdemoContactChips md-content.autocomplete {
    min-height: 250px;
}
.chipsdemoContactChips .md-item-text.compact {
    padding-top: 8px;
    padding-bottom: 8px;
}
.chipsdemoContactChips .contact-item {
    box-sizing: border-box;
}
.chipsdemoContactChips .contact-item.selected {
    opacity: 0.5;
}
.chipsdemoContactChips .contact-item.selected h3 {
    opacity: 0.5;
}
.chipsdemoContactChips .contact-item .md-list-item-text {
    padding: 14px 0;
}
.chipsdemoContactChips .contact-item .md-list-item-text h3 {
    margin: 0 !important;
    padding: 0;
    line-height: 1.2em !important;
}
.chipsdemoContactChips .contact-item .md-list-item-text h3,
.chipsdemoContactChips .contact-item .md-list-item-text p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
@media (min-width: 900px) {
    .chipsdemoContactChips .contact-item {
        float: left;
        width: 33%;
    }
}
.chipsdemoContactChips md-contact-chips {
    margin-bottom: 10px;
}
.chipsdemoContactChips .md-chips {
    padding: 5px 0 8px;
}
.chipsdemoContactChips .fixedRows {
    height: 250px;
    overflow: hidden;
}

HTML

<md-list class="fixedRows">
            <md-subheader class="md-no-sticky">Contacts</md-subheader>
            <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts" ng-if="ctrl.contacts.indexOf(contact) < 0">
                <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}">
                <div class="md-list-item-text compact">
                    <h3>{{contact.name}}</h3>
                    <p>{{contact.email}}</p>
                </div>
            </md-list-item>
            <md-list-item class="md-2-line contact-item selected" ng-repeat="(index, contact) in ctrl.contacts">
                <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}">
                <div class="md-list-item-text compact">
                    <h3>{{contact.name}}</h3>
                    <p>{{contact.email}}</p>
                </div>
            </md-list-item>
        </md-list>

</md-content>
</div>

Angular Material Contact Chips 可用于移动邮件客户端应用。

angular, list

编辑器支持Emmet

快捷键

Angular Material Contact Chips 可用于移动邮件客户端应用。

angular, list

基于AngularJS实现带搜索和过滤功能的表格

Angular 原质化设计 即时通讯和事件管理应用界面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Angular 原质化设计即时通讯和事件管理应用界面模板