使用md- contacts -chips链接firebase中的用户联系人

Question

我很难弄清楚如何将我在Firebase中的用户联系人与https://material.angularjs.org/0.11.2/#/demo/material.components.chips的md-chips chip链接起来。

基本上，每个注册用户都可以将他们通过电子邮件认识的人添加到他们的联系人列表中。用户的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()的函数，该函数设置了联系人。如何将我的用户对象设置为联系人？返回的对象是contact，我想找到一种方法让它返回被查询的对象。

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状态，这不是一个好主意。如果我们可以用$add()替换push，或者用$remove()替换splice，这应该可以正常工作。

我正在查看自定义芯片的设置，这似乎是可能的，因为您可以在芯片的添加和删除过程中调用一个函数，然后使用自定义芯片模板可能会得到与接触式芯片相同的外观。

无论如何，这里是我做了什么，让它与多维接触芯片的工作。此外，我还调整了这个项目的列表，而不是联系人，因为我想要的项目的图片。

它的关键应该是获取整个person 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();
                    });
                }
            }
        })