Question

我正在使用此代码搜索状态，因为用户在自动填充框中键入州名称。我在控制台上获得结果但是没有显示项目文本HTML

<md-content class="md-padding">                         
    <form ng-submit="$event.preventDefault()">                               
      <md-autocomplete                                   
          md-no-cache="true"
          md-selected-item="$ctrl.displayStates[$index].state"                                    
          md-search-text="$ctrl.searchText"
          md-items="item in $ctrl.querySearch($ctrl.searchText)"
          md-item-text="item.display"
          md-min-length="0"
          placeholder="Select Role?">{{item.display}}
        <md-item-template>
          <span md-highlight-text="$ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <md-not-found>
          No role matching "{{$ctrl.searchText}}" were found.
          <a ng-click="$ctrl.manageRoles('ADD')">Create a new one!</a>
        </md-not-found>
      </md-autocomplete>
    </form> 
    </md-content>

JS

很抱歉，之前我发布了一些错误的JS代码

$ctrl.querySearch=function(query) {     
      var results = query ? $ctrl.states.filter( createFilterFor(query) ) : $ctrl.states,deferred;      
          console.log("With my Testings --->",results);
        return results;
    }

function loadAll() {
  var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
          Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
          Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
          Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
          North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
          South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
          Wisconsin, Wyoming';

  return allStates.split(/, +/g).map( function (state) {
    return {
      value: state.toLowerCase(),
      display: state
    };
  });
}

function createFilterFor(query) {
  var lowercaseQuery = angular.lowercase(query);

  return function filterFn(state) {
    return (state.value.indexOf(lowercaseQuery) === 0);
  };

}

Answer 1

更改为value

<md-content class="md-padding">                         
    <form ng-submit="$event.preventDefault()">                               
      <md-autocomplete                                   
          md-no-cache="true"
          md-selected-item="displayStates[$index].state"                                    
          md-search-text="searchText"
          md-items="item in querySearch(searchText)"
          md-item-text="item.value"
          md-min-length="0"
          placeholder="Select Role?">{{item.value}}
        <md-item-template>
          <span md-highlight-text="searchText" 
                md-highlight-flags="^i">{{item.value}}</span>
        </md-item-template>
        <md-not-found>
          No role matching "{{searchText}}" were found.
          <a ng-click="manageRoles('ADD')">Create a new one!</a>
        </md-not-found>
      </md-autocomplete>
    </form> 
    </md-content>

Demo Codepen

我省略$ctrl仅用于测试目的

md-autocomplete不在HTML页面上呈现

1 个答案: