md-highlight-textがAngular JsとAngular Materialで検索テキストを正しく表示しない

Question

私はangularjを持つプロジェクトを開発し、角度のある素材で設計しました。プロジェクトでmd-autocompleteを使用したとき、ハイライトテキストに問題がありました。強調表示のテキストが正しく表示されません。私は修正しようとしたが失敗した。私は、md-autocompleteコードフォームを角度材料の公式ウェブサイトにコピーして修正しました。私のコードは

<div layout="row"> 
       <div flex="50"> 
        <md-autocomplete flex required 
            md-input-name="autocompleteField" 
            md-input-minlength="2" 
            md-input-maxlength="18" 
            md-no-cache="noCache" 
            md-selected-item="selectedItem" 
            md-search-text="searchText" 
            md-items="item in querySearch(searchText)" 
            md-item-text="item.Name" 
            md-require-match 
            md-floating-label="Report To Name or Id"> 
         <md-item-template> 
          <span md-highlight-text="searchText" md-highlight-flags="i">{{item.value}}-{{item.Name}}</span> 
         </md-item-template> 
         <div ng-messages="projectForm.autocompleteField.$error" ng-if="projectForm.autocompleteField.$touched"> 
          <div ng-message="required">You <b>must</b> have a favorite state.</div> 
          <div ng-message="md-require-match">Please select an existing state.</div> 
          <div ng-message="minlength">Your entry is not long enough.</div> 
          <div ng-message="maxlength">Your entry is too long.</div> 
         </div> 
        </md-autocomplete> 
       </div> 
      </div> 

ですそして、私のAngularJsコード示すように、この問題の

$scope.querySearch=function(query) { 
    var results = query ? $scope.Employees.filter($scope.createFilterFor(query)) : $scope.Employees; 
    var deferred = $q.defer(); 
    $timeout(function() { deferred.resolve(results); }, Math.random() * 1000, false); 
    return deferred.promise; 
} 


$scope.loadEmployee = function() { 
    return $scope.EmployeeList.map(function (employee) { 
     return { 
      value: employee.EmployeeId, 
      display: employee.EmployeeName.toLowerCase(), 
      Name:employee.EmployeeName 
       } 
    }) 
} 

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

    return function filterFn(employee) { 
     return (employee.display.indexOf(lowercaseQuery) === 0 || employee.value.indexOf(lowercaseQuery)===0); 
    }; 

} 

スクリーンショットがあるさ：

[]

この問題を解決するために私を助けてください。私はあなたの肯定的な応答を待っています。

Answer 1

@ GauravSrivastavaのコメントに同意します。 Chromeでは、「強調表示」されたテキストを右クリックして「検査」を選択し、「スタイル」タブで角度素材CSSファイル以外のスタイルを探します。私は最も簡単な方法は、右を見て、角度のある素材ではないファイルをスキャンすることです。何も表示されない場合は、各親要素を選択し、そのスタイルを確認してください。追加したCSSスタイルがあるか、角型マテリアルスタイルの1つを上書きしている別のライブラリにある可能性が最も高いです。

Answer 2

誰かが苦労している場合：

1. をサーバ側ですべての可能な結果の文字列をトリム：もしあれば

   'Name' => trim($name)

2. は、このスパン

の内側に、すべての空白を削除します

<span md-highlight-text="searchText">{{item.Name}}</span>