Связывание контактов пользователя в firebase с помощью md-contacts-chips

Question

У меня возникают проблемы с тем, как я могу связать свои контакты пользователей в Firebase с md-contacts-chips с https://material.angularjs.org/0.11.2/.

По сути, каждый зарегистрированный пользователь может добавлять знакомых по электронной почте в свой список контактов. Структура Firebase пользователей выглядит следующим образом:

firebase
-$uid1
 contacts
  $uid2 - userObject
  $uid3 - userObject

-$uid2
 contacts
  $uid1 - userObject
  $uid3 - userObject

-$uid3
 contacts
  $uid1 - userObject
  $uid2 - userObject

 etc..

Можно ли повторить контакты пользователей в виде массива объектов?

Как настроить чип md-contacts-chip?

В примере есть функция loadContacts(), в которой установлены контакты. Как бы я мог установить свои пользовательские объекты в качестве контактов? Возвращаемый объект - это контакт, и я хотел бы найти способ вернуть ему запрашиваемый объект.

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;
  });
}

Спасибо

Answer 1

Я ни в коем случае не эксперт, просто фанатик проб и ошибок. Это сказало, что я заставил это работать. Проблема заключается в том, что "md-contact-chip" использует "push and splice" для настройки массива, и в качестве состояния firebase это плохая идея. Если бы у нас был доступ для замены push на $add() или сплайсинга на $remove(), это должно работать правильно.

Я смотрел на настройку пользовательских чипов, и это кажется возможным, потому что вы можете вызвать функцию во время добавления и удаления чипа, тогда с помощью пользовательского шаблона чипа может выглядеть так же, как контактные чипы.

В любом случае, вот что я сделал, чтобы заставить его работать с md-contact-chips. Также я настроил это для работы со списком элементов, а не с контактами, потому что я хотел изображение для элементов.

Ключом к этому должно быть получение всей вашей персоны obj, затем установите ng-model="ctrl.person.contacts" внутри контроллера, убедитесь, что создан массив, если person.contacts не существует. "ctrl.person.contacts = ctrl.person.contacts || [];

Да, вы не обновляете объект firebase должным образом, но когда вы запускаете ctrl.person.$ Save(), вы просто полностью обновляете базу данных.

Html

<div layout="column" ng-cloak>
    <div>
    <p>Items selected</p>
    <pre>{{ctrl.item.installedItems}}</pre>
    </div>
    <input type="button" ng-click="ctrl.updateInstalledItems()" value='update'>
    <md-content class="md-padding autocomplete" layout="column">
    <md-contact-chips
        ng-model="ctrl.item.installedItems"
        md-contacts="ctrl.querySearch($query)"
        md-contact-name="alseSn"
        md-contact-image="image"
        md-require-match="true"
        md-highlight-flags="i"
        filter-selected="ctrl.filterSelected"
        placeholder="Select installed items">
    </md-contact-chips>
  </md-content>
</div>

контроллер

app.controller('ItemChipCtrl', ['items', 'item', '$q', '$log',
  function (items, item, $q, $log) {  
    var ctrl = this;

    ctrl.items = items;
    ctrl.item = item;

    ctrl.item.installedItems = ctrl.item.installedItems || [];

     ctrl.querySearch = querySearch;
    ctrl.allItems = loadItems(ctrl.items);
    ctrl.filterSelected = true;

    ctrl.updateInstalledItems = function() {
        $log.info('Update....')
        $log.log(ctrl.installedItems);

        ctrl.item.$save();
    }

    /**
     * Search for contacts.
     */
    function querySearch (query) {
      var results = query ?
          ctrl.allItems.filter(createFilterFor(query)) : [];
      return results;
    }
    /**
     * Create filter function for a query string
     */
    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(item) {
        return (item.alseSn.indexOf(lowercaseQuery) != -1);
      };
    }

    function loadItems(items) {        
      /*var items = $scope.items   */     
        return items.map(function (c, index) {
          var item = {
          alseSn: c.alseSn || c,
          alseCard: c.alseCard,
          installedOn: c.installedOn || null,
          image: 'img/items/47/'+c.alseCard+'.jpg' || null
        };
        return item;
      });
    }
  }
]);

маршрутные инъекции

.when('/settings/:alseSn', {
            templateUrl: 'settings.html',
            controller: 'ItemChipCtrl as ctrl',
            resolve: {
                 auth: function($location, Auth){
                    return Auth.$requireAuth().then(function(auth) {
                        return auth;
                    },function(error){
                        $location.path('/login');
                    });
                },
                item: function($route, Items, Auth){
                    return Auth.$requireAuth().then(function(){
                        return Items.getItem($route.current.params.alseSn).$loaded();
                    });
                },
                items: function(Items, Auth){
                    return Auth.$requireAuth().then(function(){
                        return Items.all.$loaded();
                    });
                }
            }
        })