使用 ng-value 检索时，标签隐藏 md-input-container 中的输入文本字段值答案

【问题标题】：label hiding input text field value in md-input-container when retrieving with ng-value使用 ng-value 检索时，标签隐藏 md-input-container 中的输入文本字段值
【发布时间】：2015-12-23 11:25:29
【问题描述】：

当使用 angularjs 检索具有 ng-value 的文本输入字段的值时，覆盖该字段的标签在检索该值后不会过渡到该字段上方。点击该字段后，我只能看到输入字段中的值。

我正在使用材料的 md-input-container：

      <md-input-container>
        <label>Name</label>
        <input type="text" ng-value="profileInfo.name" ng-model="savedProfileInfo.name" class="provider-name" id="providerName" name="providerName" />
      </md-input-container>

这是检查元素代码：

      <md-input-container class="">
        <label for="providerName">Name</label>
        <input type="text" ng-value="profileInfo.name" ng-model="savedProfileInfo.name" class="provider-name ng-pristine ng-untouched ng-valid md-input" id="providerName" name="providerName" aria-invalid="false" value="a"><div class="md-errors-spacer"></div>
      </md-input-container>

您可以清楚地看到使用 ng-value 加载页面后拉取的 value="a"。但是，该字段仍然是这样的：

只有在我点击该字段后，它才会看起来像我所期望的那样：

这是一个错误吗？我错过了什么吗？我认为 AngularJS 和 Material 应该很好玩。

可用的插件here

【问题讨论】：

我认为这不是 angular-material 的问题......这是 angular 的期望行为。你可以看看this SO question
如果我是添加 value 属性但 ng-value 动态添加该属性的人，这将有所帮助。

标签： angularjs material-design angular-material

【解决方案1】：

以一种迂回的方式，troig 的评论帮助我解决了这个问题。

此表单用于显示和更新用户的个人资料信息。我使用 ng-model 来更新用户的配置文件和 ng-value 以显示数据库中任何现有的用户配置文件信息。

ng-value 吐出 value="" 属性，该属性与 md-input-container 不兼容。为了让它正常工作，我删除了 ng-value，用 profileInfo.name 替换了 ng-model 的值，并修改了我的控制器允许我保存 profileInfo.name 而不是 savedProfileInfo.name。

代码翻译：

    <form ng-submit="saveProfile(profileInfo)">
      <md-input-container>
        <label>Name</label>
        <input type="text" ng-model="profileInfo.name" class="provider-name" id="providerName" name="providerName" />
      </md-input-container>

故事的寓意，ng-value 不适合 md-input-container 和表单标签。

【讨论】：