I am attempting to dynamically change the class based on user interaction in my code. The class should switch between "large" and "active" depending on whether the input field is filled or not. Please see the modified script below.
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>
$scope.changeClassOnClick = function(event){
$scope.class = "active";
};
$scope.changeClassOnBlur = function(event, username){
if(!username)
$scope.class = "large";
};
.large{
color: red;
}
.active{
color: blue;
} <div class="large" ng-class="class">
<label class="label">Username</label>
<input class="field" name="username" type="text" ng-model="username"
ng-click="changeClassOnClick()" ng-blur="changeClassOnBlur(username)"></div>