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

Question

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

基本上，每个注册用户都可以通过电子邮件将他们认识的人添加到他们的联系人列表中。用户的firebase结构如下：

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

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

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

 etc..

是否可以将用户联系人作为对象数组进行 ng-repeat 重复？

我应该如何配置 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，这应该可以正常工作。

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

无论如何，这就是我为使其与 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();
                    });
                }
            }
        })