离开输入时，带有 md-float-label 的 md-autocomplete 的文本变得不可见答案

【问题标题】：text of md-autocomplete with md-float-label becomes invisible when leaving the input离开输入时，带有 md-float-label 的 md-autocomplete 的文本变得不可见
【发布时间】：2017-03-13 17:17:28
【问题描述】：

一切都很好，但是当您在自动完成输入之外单击时，文本会变得不可见，如果您单击输入，它会再次变黑并且您会看到它在那里。这是我的html：

   <body ng-app='myapp' layout="column" ng-controller="autocompleteController as ctrl">
<md-content layout-align="center" layout="row">
<md-input-container style="background-color: #3C83E1; padding: 1vh 1vh 1vh 1vh" flex="33" class="md-whiteframe-4dp">
    <div layout="row" layout-align="center center" style="margin-bottom: 1vh; margin-top: 1vh">
        <img src="http://www.simplesdental.com/assets/img/simplesdental-logo-b.svg">
    </div>
    <md-autocomplete
            md-no-cache="ctrl.noCache"
            md-autoselect="true"
            md-search-text="ctrl.searchText"
            md-items="item in ctrl.queryProcurar(ctrl.searchText)"
            md-item-text="item.name"
            md-floating-label="Nome do Paciente"
    >
        <span md-highlight-text="ctrl.searchText">{{item.name}}</span>
        <md-not-found>
            N&atilde;o foi encontrado um paciente com o nome "{{ctrl.searchText}}".
        </md-not-found>
    </md-autocomplete>

</md-input-container>

还有我的 js：

    angular.module('myapp', ['ngMaterial'])
        .controller("autocompleteController", function ($http) {
            Object.filter = function (obj, predicate) {
                var result = {}, key;
                for (key in obj) {
                    if (obj.hasOwnProperty(key) && !predicate(obj[key])) {
                        result[key] = obj[key];
                    }
                }
                return result;
            };
            this.queryProcurar = function (query) {
                return $http.get("https://jsonplaceholder.typicode.com/users")
                    .then(function (response) {
                        var res = response.data.filter(function (obj) {
                            return obj.name.toLowerCase().indexOf(query.toLowerCase()) != -1;
                        });
                        return res;
                    })
            }
        })

这里有一个演示：http://codepen.io/iurypiva/pen/YZQeBN

【问题讨论】：

标签： css angularjs material-design angular-material

【解决方案1】：

由于我在 ng-repeat 中使用它，我不想为多个元素提供相同的 id 以设置样式，因此我进一步研究了。

问题实际上是md-autocomplete 的input 部分被包裹在它自己的md-input-container 中。有问题的 css 会检查 md-input-container 中是否有一个 not 具有 md-input-has-value 类的输入。外面的（你的和我的）没有，只有里面的。

所以我有选择。

按照另一个答案中的建议，我可以删除 md-input-container 并将其设为 div。但是，因为我的页面中已经有 md-input-containers 内的一些其他输入，并且因为 md-autocomplete 不会在 md-input-container 内（只是其中的 input），所以我必须复制所有md-input-container 使用的样式（文本对齐：垂直；填充：2px；等）。

或者我可以将class="md-input-has-value" 添加到我的md-input-container。

我走的是更简单的路线。

<md-input-container class="md-input-has-value">
    <md-autocomplete ...

见modified your codepen

【讨论】：

【解决方案2】：

问题是 md-input-container 和 md-floating-label 在它们的 css 中有一些奇怪的冲突。解决了将 de md-container 更改为简单的 div

【讨论】：

【解决方案3】：

问题实际上只是 CSS/样式问题

解决此问题的最简单方法是使用可用于md-autocomplete (documentation here) 的角度材质的md-input-id 属性

<md-autocomplete
   md-input-id="searchinput"
   md-autoselect="true"
   md-search-text="ctrl.searchText"
   md-items="item in ctrl.queryProcurar(ctrl.searchText)"
   md-item-text="item.name"
   md-floating-label="Nome do Paciente">

这会将一个 ID（在我的示例中我称之为 searchinput）附加到由 md-autocomplete 自动生成的输入，您可以使用它来设置输入的样式。

我在你的 codepen 中尝试的 CSS 很简单：

#searchinput { color: white; }

here is a fork of your codepen with these updates

【讨论】：