Question

背景

我正在使用Angular Material，我希望在他们提供的custom auto-complete示例中启发自定义自动完成功能。

问题

我想要的确切结果如下：

desired_output

然而，这就是我所得到的：

current_output

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

我尝试了什么

为实现这一目标，我阅读了几个教程，并设法拼凑了以下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

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

您在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 dev工具之类的东西来找出您需要覆盖的内容。

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

自定义自动完成角度材质

背景

问题

我尝试了什么

额外信息

问题

解决方案

2 个答案: