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

不幸的是，目前无法做到这一点。最近我一直在努力解决同样的问题，由于弃用努力，devs @ angular-material已经关闭了所有问题。

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

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

Answer 2

我有一个类似的问题，这就是我解决的方法： 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;
    }

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

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

2 个答案: