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

Question

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

我正在使用 material 的 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>

你可以清楚地看到那个value="a"是在页面加载完之后使用ng-value拉取的。但是，该字段仍然看起来像这样：

只有在我单击该字段后，它才会像我期望的那样显示：

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

Available plunker here

Answer 1

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

此表单用于显示和更新用户的个人资料信息。我正在使用 ng-model 来更新用户的个人资料，并使用 ng-value 来显示数据库中任何现有的用户个人资料信息。

ng-value 吐回 value="" 属性，该属性与 md-input 不兼容-容器。为了让它正常工作，我删除了 ng-value，用 [=43= 替换了 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 和表单标签一起使用。

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

label hiding input text field value in md-input-container when retrieving with ng-value

angularjs

material-design

angular-material