用于 md-autocomplete 的自定义 <md-item-template>答案

【问题标题】：Custom <md-item-template> for md-autocomplete用于 md-autocomplete 的自定义 <md-item-template>
【发布时间】：2016-12-01 05:02:44
【问题描述】：

有没有办法使用自定义模板并按特定类型属性对匹配的结果进行分组（如下图所示）？

使用此代码。

 <md-item-template>
                <div class="col-xs-2   border-bottom: 1px solid #ccc;">
                    <span class="item-metastat" ng-if="item.type=='Staff'">
                        {{item.type }} 
                    </span>

                    <span class="item-metastat" ng-if="item.type=='Branch'">
                        {{item.type }} 
                    </span>
                    <span class="item-metastat" ng-if="item.type=='Region'">
                        {{item.type }} 
                    </span>
                    <span class="item-metastat" ng-if="item.type=='State'">
                        {{item.type }} 
                    </span>
                </div>
                <div class="col-xs-10 display">
                    <span> {{item.value}} </span>
                </div>
            </md-item-template>

我能够创建这个设计

我需要做哪些修改才能重复输入一次，即第一次？

【问题讨论】：

标签： autocomplete material-design angular-material md-autocomplete

【解决方案1】：

我遇到了类似的问题，这就是我解决它的方法： https://plnkr.co/edit/R62Dp2JG0N8xNGU2pIQj?p=preview

模板：

      <div class="row card-container">
         <div class="col-xs-2">
           {{item.type }} 
      </div>

      <div class="col-xs-10 display">
        <span>
          {{item.value}}
        </span>

        <span >
            <span class="meta-data-panel">
              <div>
                <strong>Id:</strong> {{item.id}}
              </div>
              <div>
               <strong>Name:</strong> {{item.name}}
               </div>
              <div>
                <strong>desc:</strong> {{item.desc}} 
              </div>
          </span>
        </span>
      </div>
    </div>

CSS

   .meta-data-panel{
       position: absolute;
        top: 30px;
        color: grey;
        left: 25px;
    }

    .meta-data-container{
      background-color:white;
    }

    .meta-data-panel > div{
      display:block;
      margin:0px;
      height:25px;
    }

    .card-container{
      border:1px solid #ccc;
      height:130px;
    }

    .autocomplete-custom-template li{
      position: relative;
       height:130px;
    }

请注意，这使用位置绝对样式，因此您需要小心处理文本换行并根据要显示的元素数量更改大小。

【讨论】：

【解决方案2】：

很遗憾，目前没有办法做到这一点。我最近在同一个问题上苦苦挣扎，开发人员@angular-material 由于弃用工作而关闭了所有问题。

https://github.com/angular/material/issues/5182

我们将不得不依赖其他组件或分叉 angular-material 存储库来创建我们自己的该指令的扩展版本。

【讨论】：

感谢您的回复。早些时候我自己解决了这个问题。目前我没有要在答案中发布的代码:(