AngularJS adding css class to parent div

Question

I am trying to add class to parent item with angularjs. I am new to angular and little ok with jquery. Is there any specific way to add border to the parent of parent span when there is a ng-change for a textbox control. This scenario came to me as I am trying to use a kendo date picker inside a ng-repeat and have to add a red border to control if there is any validation error. Telerik kendo datepicker adds a span as parent to textbox. so adding border color red to textbox doesnt make any sense and it has to be a border red for dynamically added parent span for kendo datepicker. I am trying to make this generic so that the same can be used through out my application.

Here is my fiddle

<div ng-controller="MyCtrl">
  <span class="k-widget k-datepicker k-header" ng-class={{classValidationControl}} style="border: solid">
      <span class="k-picker-wrap k-state-default">
        <input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-change="addBorderToControl('endDateTextbox-0')">
      <span>
      <span unselectable="on" class="k-icon k-i-calendar">
      select
      </span>
  </span>

  <span class="k-widget k-datepicker k-header" ng-class={{classValidationControl}} style="border: solid">
      <span class="k-picker-wrap k-state-default">
        <input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-change="addBorderToControl('endDateTextbox-0')">
      <span>
      <span unselectable="on" class="k-icon k-i-calendar">
      select
      </span>
  </span>
</div>

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
  $scope.addBorderToControl = function(controlName) {
    $('#' + controlName).element.parent().parent().addClass("validationControl");
  }
}

but you function MyCtrl not calling. i just alerted controlName but nothing happened — Himanshu Bhardiya
– Himanshu Bhardiya, Commented Feb 24, 2016 at 8:03

Mr Lister · Accepted Answer · 2016-02-28 18:43:18Z

Is there a reason you are using Angular v1.0.1?

You have broken HTML - not closing <span>.

You are repeating the mistakes we all did - messing with the DOM inside controllers. You should never do this.

TL;DR I have changed your jsFiddle to work according to the explanation ahead:

http://jsfiddle.net/mickeyvip/kqzd5q98/3/

Lets break the task apart:

The jsFiddle lacks wiring your MyCtrl to angular. You need to add:

myApp.controller('MyCtrl', MyCtrl);

Now Angular can find your MyCtrl and actually run it.

But Angular will yell at you that it can't find ngModel - a variable on $scope that Angular wants to set when you change the value of the <input> element:

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-model="startDate">

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-model="endDate">

Next we will call validateEndDate() on input change, not addBorderToControl(). We actually don't need addBorderToControl() at all.

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-model="startDate" ng-change="validateStartDate()">

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-model="endDate" ng-change="validateEndDate()">

Each function will set validity on correct variable on $scope:

 $scope.validateStartDate = function() {
    // validate $scope.startDate
    var isValid = $scope.startDate === 'start';
    $scope.startDateValid = isValid;
  }

$scope.validateEndDate = function() {
    // validate $scope.endDate
    var isValid = $scope.endDate === 'end';
    $scope.endDateValid = isValid;
  }

For this example I will treat startDate as valid if it equals to "start" and endDate if it equals to "end".

Now that we have all the validation logic in place, we will use Angular's directive ng-class on the <span> you need. ng-class was not used correctly in your sample, it expects an expression in a value of the attribute, so there is no need to wrap it in {{ }}. We will give it an object with key = your class name and a boolean value which will decide if we want to add this class (true) or remove it (false):

<span class="k-widget k-datepicker k-header" ng-class="{validationControl: !startDateValid}">

<span class="k-widget k-datepicker k-header" ng-class="{validationControl: !endDateValid}">

As you see I have removed the style="border: solid" because it overrides border style set in CSS.

That's it. Now we have a working example, we do not manipulate DOM, but only performing business logic.

Hope it helpled.

Pesulap · Accepted Answer · 2016-02-24 08:47:13Z

1

ng-change requires ng-model

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-change="addBorderToControl('endDateTextbox-0')" ng-model="model1">

and you need Jquery.

fiddle

-------------------------------------------

Edit:

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-change="addBorderToControl('endDateTextbox-1')" ng-model="model2">

change ng-change="addBorderToControl('endDateTextbox-0') to ng-change="addBorderToControl('endDateTextbox-1')

-------------------------------------------

Edit 2:

without Jquery:

fiddle

edited Feb 24, 2016 at 8:47

answered Feb 24, 2016 at 8:20

Pesulap

8948 silver badges19 bronze badges

1 Comment

Kurkula Over a year ago

by any chance can we use angular instead of Jquery?

Collectives™ on Stack Overflow

AngularJS adding css class to parent div

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related