CODEWITHSUNDEEP
javascripthtmlcssangularjs
Jacob
Jacob

Reputation: 25

Using AngularJS to style label when ng-model changes in a text field

A few days back, I asked the following question:

I've searched for how to do this, and I've not had any luck. I'm fairly inexperienced with web stuff, so perhaps it's so trivial that no one needs to ask how to do it :( Suppose I have an HTML text input field with a label, like this:

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

Now suppose the text input field value is changed. Is there a way to use AngularJS to restyle the label (Like, turn it green, for example) when this change occurs? I've looked into using ng-change and ng-class, but I'm not knowledgeable enough about how these work to use them in this manner.

When I tested the solution provided, which was:

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>

It worked, but only when I manually changed the text field (i.e. I typed stuff in the text field directly). However, in the particular application I'm working on, I need for the labels to be restyled when the value stored in ng-model changes. Unfortunately, I falsely assumed that if this method worked when I manually changed the text field, it must work if ng-model were to change as well. I've come to find out that it doesn't.

What's the reason for this? And how can I make the label re-style when ng-model changes?

Thanks!

EDIT: When I say "ng-model changes," what I mean is..in my controller, there is a variable that is used to populate the text fields of the app that I'm working on. However, when the user clicks an "import changes" button, this variable is changed according to the changes that they are importing, which consequently changes the corresponding text fields linked to that variable. Ultimately, I want all of the labels attached to these changed text fields to be highlighted for the user to see. I'm sorry for my vagueness.

Upvotes: 1

Views: 10308

Answers (3)

RootHacker
RootHacker

Reputation: 1107

   <!--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" }
        }
    }

Upvotes: 0

Shawn C.
Shawn C.

Reputation: 6841

Each input in an angular js form has meta data properties to help you. For example

<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

Upvotes: 1

meriadec
meriadec

Reputation: 2983

You can achieve that using $scope.$watch :

function demoCtrl ($scope) {
  
  $scope.$watch('myModel', function (newValue, oldValue) {
    if (newValue) {
      $scope.hasChanged = true;
    }
  });
  
  $scope.changeMyModel = function () {
    $scope.myModel = 'wonderful';
  };
  
}
.marvellous {
  color: green;
}
<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>

Upvotes: 0

Related Questions