将$ resource查询参数传递给angular-material md-chips自动完成

Question

我试图使用角度素材的md-autocomplete来传递带有$ resource的可搜索数据库查询。

这是我的控制器

var pendingSearch, cancelSearch = angular.noop;
  var cachedQuery, lastSearch;
  $scope.allContacts = loadContacts();
$scope.contacts = [$scope.allContacts[0]];
$scope.asyncContacts = [];
$scope.filterSelected = true;
$scope.querySearch = querySearch;
$scope.delayedQuerySearch = delayedQuerySearch;
var contacts=[];
  /**
   * Search for contacts; use a random delay to simulate a remote call
   */

  function querySearch (criteria) {
    cachedQuery = cachedQuery || criteria;

    User.Item.search({key: cachedQuery}).$promise.then(function (data) {

      for (var i = 0; i < data.lists.length; i++)
      {
        var contacts.push(data.lists[i].last_name)
      }
    return cachedQuery ? $scope.allContacts.filter(createFilterFor(cachedQuery)):[]

    })

  }
  /**
   * Async search for contacts
   * Also debounce the queries; since the md-contact-chips does not support this
   */
  function delayedQuerySearch(criteria) {
    cachedQuery = criteria;
    if ( !pendingSearch || !debounceSearch() )  {
      cancelSearch();
      return pendingSearch = $q(function(resolve, reject) {
        // Simulate async search... (after debouncing)
        cancelSearch = reject;
        $timeout(function(criteria) {
           resolve( $scope.querySearch(criteria));
              refreshDebounce() ;
        }, Math.random() * 900, true)
      });
    }
    return pendingSearch;
  }
  function refreshDebounce() {
    lastSearch = 0;
    pendingSearch = null;
    cancelSearch = angular.noop;
  }
  /**
   * Debounce if querying faster than 300ms
   */
  function debounceSearch() {
    var now = new Date().getMilliseconds();
    lastSearch = lastSearch || now;
    return ((now - lastSearch) < 500);
  }
  /**
   * Create filter function for a query string
   */
  function createFilterFor(query) {
    var lowercaseQuery = angular.lowercase(query);
    return function filterFn(contact) {
      return (contact._lowername.indexOf(lowercaseQuery) != -1);;
    };
  }

  function loadContacts() {


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

这是我的HTML

<md-list class="fixedRows">
                <md-subheader class="md-no-sticky">Contacts</md-subheader>
                <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in allContacts"
                              ng-if="contacts.indexOf(contact) < 0">
                  <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
                  <div class="md-list-item-text compact">
                    <h3>{{contact.name}}</h3>
                    <p>{{contact.email}}</p>
                  </div>
                </md-list-item>
                <md-list-item class="md-2-line contact-item selected" ng-repeat="(index, contact) in contacts">
                  <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
                  <div class="md-list-item-text compact">
                    <h3>{{contact.name}}</h3>
                    <p>{{contact.email}}</p>
                  </div>
                </md-list-item><h2 class="md-title">Searching asynchronously.</h2>
              <md-contact-chips
                ng-model="asyncContacts"
                md-contacts="delayedQuerySearch($query)"
                md-contact-name="name"
                md-contact-image="image"
                md-contact-email="email"
                md-require-match="true"
                md-highlight-flags="i"
                filter-selected="filterSelected"
                placeholder="To">
              </md-contact-chips>

然而我一直在

angular.js:12722 TypeError: Cannot read property 'map' of undefined

或未定义长度的角度材料误差。

Answer 1

可变联系人是'未定义'。将'contacts'变量的声明移到被调用方法之上。它应该像 -

var contacts =[];
$scope.allContacts = loadContacts();
function loadContacts(){
     // your logic comes here
     alert(JSON.stringyfy(contacts);
}