自定义自动完成 Angular-Material

Question

背景

我正在使用他们提供的 Angular Material, and I want to do a custom auto-complete inspired in the 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

感谢您的帮助！

Answer 1

似乎跨度没有创建新行，它们只是一个接一个。

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

Answer 2

我建议您阅读有关 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>

第二个问题是您需要重写某些 angular material 样式以使您的解决方案按您希望的方式工作。例如，默认情况下 angular material 自动完成中的每个项目都有固定大小 48px。你不想要这个，需要用这样的 css 覆盖它：

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

要使其完全按照您希望的方式工作，您可能需要覆盖其他一些 angular material css。有时这可能有点棘手，但您可以使用 chrome 开发工具之类的东西来找出您需要覆盖的内容。

自定义自动完成 Angular-Material

Custom Auto-complete Angular-Material

javascript

autocomplete

angularjs

angular-material

背景

问题

我试过的

额外信息

问题

解决方案