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..

是否可以将用户联系人重复为对象数组？

我应该如何配置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表示这是一个坏主意。如果我们有权使用$ add（）替换push或者使用$ remove（）进行拼接，那么这应该可以正常工作。

我正在查看自定义芯片设置，看起来可能是因为你可以在芯片的添加和删除期间调用一个函数，然后使用自定义芯片模板可以获得与触点芯片相同的外观。

无论如何，这是我用md-contact-chips工作的方法。此外，我已经调整了这个项目列表，而不是联系人，因为我想要项目的图片。

它的关键应该是让你的整个人obj，然后在控制器内设置ng-model =“ctrl.person.contacts”，如果person.contacts不存在，请确保创建一个数组。 “ctrl.person.contacts = ctrl.person.contacts || [];

是的，你运行时没有正确更新firebase对象 ctrl.person。$ save（）你刚刚完全更新了db。

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

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

1 个答案: