自定义自动完成 Angular-Material答案

【问题标题】：Custom Auto-complete Angular-Material自定义自动完成 Angular-Material
【发布时间】：2016-10-11 06:49:14
【问题描述】：

背景

我正在使用Angular Material，并且我想根据他们提供的custom auto-complete 示例进行自定义自动完成。

问题

我想要的确切结果如下：

但是，这就是我得到的：

问题是，无论我做什么，我的项目列表都无法正确显示！

我尝试了什么

为了实现这一点，我阅读了几篇教程，并设法将以下 HTML 代码拼凑在一起：

index.html:

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Custom-Complete</title>

    <!--CSS files-->
    <link rel="stylesheet" href="../node_modules/angular-material/angular-material.min.css">
</head>

<body ng-app="MyApp" ng-cloak>

    <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoCustomTemplate" ng-app="MyApp">
        <md-content layout-padding="" layout="column">
            <form ng-submit="$event.preventDefault()">

                <md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)"
                    md-item-text="item.Company_Name" md-min-length="0" placeholder="Write client Info" md-menu-class="autocomplete-custom-template">
                    <md-item-template>

                        <span class="item-title">
                            <b>Company name:</b> {{item.Company_Name}}
                        </span>

                        <span class="item-metadata">
                            <b>Client Ids:</b>
                            <span ng-repeat="clientId in item.Assets">
                                <span class="item-metastat">
                                    &emsp;<ng-md-icon icon="subdirectory_arrow_right" style="fill: gray" size="24"></ng-md-icon>{{clientId}}
                                </span>
                            </span>
                        </span>
                    </md-item-template>
                </md-autocomplete>
            </form>
        </md-content>
    </div>

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular-aria/angular-aria.min.js"></script>
    <script src="../node_modules/angular-animate/angular-animate.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
    <script src="../node_modules/angular-material/angular-material.min.js"></script>
    <script src="../node_modules/angular-material-icons/angular-material-icons.min.js"></script>

    <!-- Your application bootstrap  -->
    <script type="text/javascript" src="js/autocomplete.js"></script>
</body>

</html>

我想我的问题是我不知道我需要使用哪些 HTML 标签，也不知道我需要如何使用它们！

额外信息

这些是我正在使用的库及其版本（特别重要的是 Angular Material - v1.0.9 的版本）：

"angular": "^1.5.6",
"angular-animate": "^1.5.6",
"angular-aria": "^1.5.6",
"angular-material": "^1.0.9"
"angular-messages": "^1.5.6",
"express": "^3.2.6"

问题

我的代码有什么问题，我该如何解决？

解决方案

在这里提供的答案之后，我终于更新了我的 github 存储库。如果您认为这是您想要的东西，请随意克隆并试一试！

https://github.com/Fl4m3Ph03n1x/custom-complete

感谢您的帮助！

【问题讨论】：

标签： javascript angularjs autocomplete angular-material

【解决方案1】：

我建议你阅读一下block vs inline elements。因为第一个问题是当你想要块元素时使用内联元素（跨度），例如一段。

下面是您在 md-item-template 中查找的代码类型示例。

<p>Company Name: {{item.Company_Name}}</p>
<p>Client Ids:</p>
<div ng-repeat="clientId in item.Assets" class="addAClassForTheLeftPaddingLeftEtc">
    <ng-md-icon ...></ng-md-icon>{{clientId}}
</div>

第二个问题是您需要覆盖一些有角度的材质样式以使您的解决方案以您想要的方式工作。例如，默认情况下，角度材料自动完成中的每个项目的固定大小为 48px。你不想要这个，需要用一些像这样的 css 覆盖它：

.md-autocomplete-suggestions-container .md-autocomplete-suggestions li {
  line-height: inherit;
  height: auto;
}

要让它完全按照您想要的方式工作，您可能需要覆盖一些其他有角度的材料 css。有时可能会有点棘手，但您可以使用 chrome 开发工具之类的工具来找出需要覆盖的内容。

【讨论】：

所以我必须与 Angular Material CSS 作斗争。我看到了问题。我没想到会这样。谢谢您的帮助！我恢复到 1.0.6 版，通过您的修复和一些调整，我让它完美运行！

【解决方案2】：

似乎跨度没有创建新行，它们只是彼此相邻。

用 div 修改模板，因此它们为每个元素创建一个新行。

               <md-item-template>

                    <div class="item-title">
                        <b>Company name:</b> {{item.Company_Name}}
                    </div>

                    <div class="item-metadata">
                        <b>Client Ids:</b>
                        <span ng-repeat="clientId in item.Assets">
                            <span class="item-metastat">
                                &emsp;<ng-md-icon ...></ng-md-icon>{{clientId}}
                            </span>
                        </span>
                    </div>
                </md-item-template>

【讨论】：

如果我使用div，第二行就会消失=(