通过模型更改输入占位符的值？

Question

我试图从控制器更改输入占位符的值，但是还没有想清楚该怎么做。

input(type='text', ng-model='inputText', side='30', placeholder='enter username')

如何修改模型元素的属性？

- Jonah Katz

Answer 1

你可以在控制器中与变量进行绑定：

<input type="text" ng-model="inputText" placeholder="{{somePlaceholder}}" />

在控制器中:

$scope.somePlaceholder = 'abc';

- Wagner Francisco

---

它可以工作，但是整个表达式对终端用户可见有短暂的延迟。这就是为什么需要ng-binding。请参阅https://docs.angularjs.org/api/ng/directive/ngBind。 - Bùi Thanh Hải

同样，它在IE中无法工作，会抛出一个错误。可能的原因与syle="{{}}"不被推荐使用相同：https://docs.angularjs.org/guide/ie - velochy

@BùiThanhHải 在这种情况下，你会如何使用 ng-bind？有代码示例吗？ - Greg Dougherty

你的示例在设备上无法运行。键盘显示但无法输入。 - Braian Mellor

为了实现ng-bind的属性功能，请使用ng-attr-*attributeName*，如ysub所述。 - Aides

Answer 2

尽管对于我来说该回答被接受了，但在IE中仍然会抛出Javascript错误（至少对于Angular 1.2而言）。这是一个bug，但解决方法是使用ngAttr，详见https://docs.angularjs.org/guide/interpolation

<input type="text" ng-model="inputText" ng-attr-placeholder="{{somePlaceholder}}" />

问题：https://github.com/angular/angular.js/issues/5025

- ysub

Answer 3

由于AngularJS没有像jQuery一样的指令DOM操作，修改一个元素的属性的正确方法是使用指令。 通过指令的链接函数，您可以访问元素及其属性。

将整个输入内容包装在一个指令中，您仍然可以通过控制器属性引入ng-model的方法。

这种方法有助于将ngmodel的逻辑与占位符从控制器中分离出来。 如果它们之间没有逻辑关系，您可以按照Wagner Francisco所说的那样进行操作。

- Z.T. Yang

Answer 4

正如Wagner Francisco在JADE中所说，

input(type="text", ng-model="someModel", placeholder="{{someScopeVariable}}")`

在你的控制器中：

$scope.someScopeVariable = 'somevalue'

- amit_kenny

---

这看起来像是对问题的一个有效回答。如果你不喜欢它，应该给它投反对票，而不是标记删除。 - ArtOfWarfare

这正是与@Wagner Francisco完全相同的答案。 - Jose Areas