autocomplete - 风俗用于 md 自动完成

Question

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

使用此代码。

 <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>

我能够创造这个设计

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

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

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

Answer 2

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

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

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