鏈接用戶與MD-接觸芯片火力接觸

Question

我沒法把我的頭我怎麼能在火力地堡配有MD-接觸芯片從https://material.angularjs.org/0.11.2/#/demo/material.components.chips

基本上，每個註冊用戶可以鏈接到我的用戶的聯繫人各地通過電子郵件將他們認識的人添加到他們的聯繫人列表在使用者火力結構如下：

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

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

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

etc.. 

是否有可能NG-重複用戶的聯繫人作爲對象的數組？

我該如何配置md-contacts芯片？

該示例有一個名爲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-接觸芯片工作。此外，我已經調整了這個項目的列表，而不是聯繫人，因爲我想要項目的圖片。

它的關鍵應該是讓你的整個人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(); 
        }); 
       } 
      } 
     })