在angular中实现md-autocomplete时出错

时间:2017-08-02 16:50:57

标签: angularjs angular-material

执行md-autoComplete中的列表后。我在搜索时收到此错误。我已将控制器名称设为ctrl,并包含$timeout$q$log,附加html和js文件。

请告诉我如何修复它。提前谢谢。

错误

ionic.bundle.js:26794 TypeError: Cannot read property 'indexOf' of 
 null
    at filterFn (http://localhost:8100/js/guest-controller.js:102:31)
    at Array.filter (native)
    at Object.querySearch (http://localhost:8100/js/guest-
controller.js:60:41)
    at fn (eval at compile 
(http://localhost:8100/lib/ionic/js/ionic.bundle.js:27638:15), 
 <anonymous>:4:344)
    at Scope.$eval 
(http://localhost:8100/lib/ionic/js/ionic.bundle.js:30395:28)
    at de 
(https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-
 material.min.js:13:11563)
    at he 

(https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-
 material.min.js:13:12420)
    at 

https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-
   material.min.js:13:8834
    at processQueue 
 (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29127:28)

html 文件

    <div class="form_element_grid auto_fill_info">
                <label>Company Name</label>
                <md-autocomplete
                 ng-disabled="ctrl.isDisabled"
                 md-no-cache="true"
                 md-selected-item="ctrl.selectedItem"
          md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
                 md-search-text="ctrl.searchText"
                md-selected-item-change="ctrl.selectedItemChange(item)"
                  md-items="item in ctrl.querySearch(ctrl.searchText)"
                  md-item-text="item.display"
                  md-min-length="0"
                  placeholder="Enter Company Name" required/>

                   <md-item-template>
       <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
                   </md-item-template>

                   <md-not-found>
                No states matching "{{ctrl.searchText}}" were found.
        <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
                   </md-not-found>
             </md-autocomplete>

Js 档案

 var self = this;
    $scope.guestDetails = guestData.data;
    self.searchText = '';
    self.simulateQuery = false;
    self.isDisabled    = false;



 // list of `state` value/display objects
    self.states        = loadAll();
    self.querySearch   = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange   = searchTextChange;

    self.newState = newState;


    function newState(state) {

      self.states= loadAll();


    }

    // ******************************
    // Internal methods
    // ******************************

    /**
     * Search for states... use $timeout to simulate
     * remote dataservice call.
     */
    function querySearch (query) {
      var results = query ? self.states.filter( createFilterFor(query) 
   ) : self.states,
          deferred;
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function () { deferred.resolve( results ); }, 
      Math.random() * 1000, false);
        return deferred.promise;
      } else {
        return results;
      }
    }

    function searchTextChange(text) {

      $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item) {
      $log.info('Item changed to ' + JSON.stringify(item));
    }

    /**
     * Build `states` list of key/value pairs
     */
    function loadAll() {
var deliverycomp = $scope.guestDetails;
console.log(deliverycomp);
return deliverycomp.map( function (state) {

  return {
    value: state.guestId,
    display: state.guestName
  };
});

}



/**
     * Create filter function for a query string
     */
     function createFilterFor(query) {
       var lowercaseQuery = query;
       return function filterFn(state) {
         return (state.display.indexOf('lowercaseQuery') === 0);
       };

     }

0 个答案:

没有答案