Sample

Please consider this Plunkr.

What I need

I need to be able to get an element by it's id.

The sample code should be able to assign a css class to any DOM element that exists on the current view.

This should be checked using a source object, provided by the $scope in a controller. This source object may/will have more properties than there are input elements on the view.

So I want to loop through each object key and see if a corresponding DOM element exists. If so, validate it's value.

The question

How do I get an element by id, using AngularJS only (jQuery is NOT allowed!!)?

Specifically for the Plunkr, I need this function to (really) work:

self.IsFieldCurrentlyActive = function(field){
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return (inputElement != 'undefined');

  // Sample only
  var idx = field.indexOf('Unused');
  return idx == -1;
};

And this one (basically the same):

self.GetElementByKey = function(key)
{
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return inputElement;

  // Sample only
  return null;
}

Update

Apologies, I forgot to add an important requirement: I can't use any mechanism that assumes unique IDs, because there may be multiple occurrences of the same form (and the same IDs). So, I need to respect the Angular scope.

Thanks!

Sample

Please consider this Plunkr.

What I need

I need to be able to get an element by it's id.

The sample code should be able to assign a css class to any DOM element that exists on the current view.

This should be checked using a source object, provided by the $scope in a controller. This source object may/will have more properties than there are input elements on the view.

So I want to loop through each object key and see if a corresponding DOM element exists. If so, validate it's value.

The question

How do I get an element by id, using AngularJS only (jQuery is NOT allowed!!)?

Specifically for the Plunkr, I need this function to (really) work:

self.IsFieldCurrentlyActive = function(field){
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return (inputElement != 'undefined');

  // Sample only
  var idx = field.indexOf('Unused');
  return idx == -1;
};

And this one (basically the same):

self.GetElementByKey = function(key)
{
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return inputElement;

  // Sample only
  return null;
}

Update

Apologies, I forgot to add an important requirement: I can't use any mechanism that assumes unique IDs, because there may be multiple occurrences of the same form (and the same IDs). So, I need to respect the Angular scope.

Thanks!

• javascript
• css
• angularjs
• dom

• 1 What you want to achieve ? just assign a class to element ? – Ajinder Singh Commented Sep 9, 2015 at 10:12
• 1 methinks you doing something wrong if you need use dom manipulation in factory or controller, try see “Thinking in AngularJS” if I have a jQuery background? – Grundy Commented Sep 9, 2015 at 10:13
• 1 As @Grundy said this is not angular way of doing things . Consider controller,directives for DOM manipulation. – Ajinder Singh Commented Sep 9, 2015 at 10:15
• 1 @Spikee Consider using ng-class for conditionally assigning classes to element. Check docs.angularjs.org/api/ng/directive/ngClass – Ajinder Singh Commented Sep 9, 2015 at 10:51
• 1 @Spikee - you can move the conditional logic to service and manipulate the element via directives – Ajinder Singh Commented Sep 9, 2015 at 10:55

2 Answers 2

In pure JS you can do document.querySelector('#myID');

Or within angular using angular.element: angular.element(document.querySelector('#myID'));

Instead try angular.element($('#myElement'));