Angular ng-class bug
class should change when model changes
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div data-ng-app="app">
<div class="container" data-ng-controller="appCntrl">
<form id="existing-parameter" class="form" name="formDetails" novalidate>
<div class="form-group-lg">
<label>Name</label>
<br/>
<textarea name="description" id="param-description" class="form-control"
data-ng-model="paramDetails.name"
data-ng-required="true"
data-ng-class="{'nochange': paramDetails.name==paramDetailsCopy.name}"
></textarea>
</div>
<!-- History Selector -->
<div class="form-group-lg">
<label>
History
<span>(selection will be copied into form)</span>
</label>
<br/>
<select id="history"
data-ng-model="paramHistory.selected"
data-ng-selected="paramHistory.selected"
data-ng-change="showHistory()"
data-ng-class="{'nochange': paramHistory.selected==paramHistory.data[0].start}">
<option data-ng-repeat="option in paramHistory.data" value="{{option.start}}">
{{option.start}}
</option>
</select>
<p>
When history selector goes green the name text area should also be green.
</p>
</div>
</form>
</div>
</div>
SCSS
$formBack: white;
$formDirtyValid: lightgreen;
$formDirtyInvalid: red;
.ng-empty, .form-control.ng-dirty.ng-invalid {
background-color: $formDirtyInvalid;
color: $formBack;
}
.form-control.ng-valid, select.ng-valid {
background-color: $formDirtyValid;
}
.form-control.ng-valid.nochange, select.ng-valid.nochange {
background-color: $formBack ;
}
JavaScript
var app = angular.module('app', []);
app.controller('appCntrl', ['$scope', function($scope) {
$scope.paramDetails = {
name: 'Name 1'
};
$scope.paramDetailsCopy = {
name: 'Name 1'
};
$scope.paramHistory = {
selected: "2017-11-01",
ok: false,
error: 'Some Error',
data: [{
start: "2017-11-01",
name: 'Name 1'
}, {
start: "2017-10-12",
name: 'Name 2'
}]
};
$scope.showHistory = function() {
var data = $scope.paramHistory.data;
var i;
for (i in data) {
if (data[i].start === $scope.paramHistory.selected) {
$scope.paramDetails.name = data[i].name;
break;
}
}
};
}]);