Example
Please take a look at this Plunkr example.
Requirement
I am looking for a way to retrieve an element by its id.
The provided code should be capable of applying a CSS class to any existing DOM element within the current view.
This functionality needs to be performed using a source object from the $scope in a controller. The source object might have more properties than there are input elements in view.
Hence, I aim to iterate through each object key and verify if a corresponding DOM element exists, then validate its value.
The Query
How can I retrieve an element by id using AngularJS exclusively (jQuery is not permitted)?
Specifically for the Plunkr demonstration, it is vital that this function operates correctly:
self.IsFieldCurrentlyActive = function(field){
// Pseudocode desired:
// var inputElement = angular.find(field);
// return (inputElement != 'undefined');
// Placeholder code
var idx = field.indexOf('Unused');
return idx == -1;
};
And also this one (essentially identical):
self.GetElementByKey = function(key)
{
// Pseudocode required:
// var inputElement = angular.find(field);
// return inputElement;
// Sample implementation
return null;
}
Update
Regrettably, I overlooked an important constraint: I cannot employ any method assuming unique IDs because there could be multiple instances of the same form (with identical IDs). Therefore, adherence to the Angular scope is necessary.
Thank you!