javascript - 当 ng-model 在文本字段中更改时使用 AngularJS 设置标签样式

Question

几天前，我问了以下问题:

我已经搜索过如何执行此操作，但没有任何运气。我对网络的东西相当缺乏经验，所以也许它是如此微不足道以至于没有人需要问如何去做:(假设我有一个带有标签的 HTML 文本输入字段，如下所示:

<label for = "stuff">Stuff</label>
<input type = "text" name = "stuffz" id="stuff" value = "hello!">

现在假设文本输入字段值已更改。发生这种变化时，有没有办法使用 AngularJS 重新设置标签的样式(例如，将其变为绿色)？我研究过使用 ng-change 和 ng-class，但我对它们的工作原理了解不够，无法以这种方式使用它们。

当我测试提供的解决方案时，它是:

CSS

.marvellous {
 color: green;
 }

HTML

<div ng-app="demo">

<label for="stuff" ng-class="{ 'marvellous' : !!hasChanged }">Stuff</label>
<input type="text" id="stuff" ng-model="myModel" ng-change="hasChanged = true"></div>

它起作用了，但只有当我手动更改文本字段时(即我直接在文本字段中键入内容)。但是，在我正在处理的特定应用程序中，当存储在 ng-model 中的值发生变化时，我需要重新设置标签的样式。不幸的是，我错误地认为，如果在我手动更改文本字段时此方法有效，那么如果 ng-model 也发生更改，它也必须有效。我发现事实并非如此。

这是什么原因？以及如何在 ng-model 更改时使标签重新样式化？

谢谢!

编辑:当我说“ng-model 改变”时，我的意思是......在我的 Controller 中，有一个变量用于填充我正在处理的应用程序的文本字段。但是，当用户单击“导入更改”按钮时，该变量会根据他们正在导入的更改进行更改，从而更改链接到该变量的相应文本字段。最后，我希望所有附加到这些更改的文本字段的标签都突出显示以供用户查看。很抱歉我的含糊不清。

Answer 1

angular js 表单中的每个输入都有元数据属性来帮助您。例如

<form id="form">
   <label for="stuff" ng-class="{ 'marvellous' : form.stuff.$dirty}">Stuff</label>
   <input type="text" id="stuff" ng-model="myModel" ng-change="hasChanged = true">
</form>

https://docs.angularjs.org/api/ng/type/form.FormController