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改变时，如何使标签重新设计？

谢谢！

编辑：当我说＆＃34; ng-model changes，＆＃34;我的意思是......在我的控制器中，有一个变量用于填充我正在处理的应用程序的文本字段。但是，当用户点击＆＃34;导入更改＆＃34;按钮，此变量根据它们导入的更改而更改，从而更改链接到该变量的相应文本字段。最终，我希望突出显示附加到这些已更改文本字段的所有标签，供用户查看。对不起，我很抱歉。

Answer 1

角度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

Answer 2

您可以使用$scope.$watch：

实现这一目标

＆＃13;

function demoCtrl ($scope) {
  
  $scope.$watch('myModel', function (newValue, oldValue) {
    if (newValue) {
      $scope.hasChanged = true;
    }
  });
  
  $scope.changeMyModel = function () {
    $scope.myModel = 'wonderful';
  };
  
}

＆＃13;

.marvellous {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="demoCtrl">
  
  <label for="stuff" ng-class="{ 'marvellous' : !!hasChanged }">Stuff</label>
  <input type="text" id="stuff" ng-model="myModel" ng-change="hasChanged = true">
  
  <button ng-click="changeMyModel()">change model</button>

</div>

＆＃13;

Answer 3

   <!--Use ng-style !!!  replace your lable with this--->
   <label for="stuff" ng-style="hasChanged()">Stuff</label> 


   and define your function like this below---

    $scope.hasChanged = function(){
      if($scope.myModel !== initValue){
            return { color: "green" }
        }
    }

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

3 个答案: