CODEWITHSUNDEEP
javascriptangularjsjqlite
navtej singh
navtej singh

Reputation: 277

How to find element by id in Angualar's jqLite element object

I'm using this:

$vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

Then at later point of time I want to locate the #pselect ID element. My $vehicleTypeDropdown looks like this which is the jqLite object:-

<select class="vehicleTypeDropdown" id="vehicleType">
<option id="#pselect" value="">Please Select</option>
<option ng-repeat="types in selectedType" value="Vt3" class="ng-scope ng-binding">vt3</option>
<option ng-repeat="types in selectedType" value="Vt4" class="ng-scope ng-binding">vt4</option>
</select>

There are two questions -

  1. It's written in the jqLite documentation that .find() method only looks for the tags, not for classes or ids. So how do I get

    $vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

    as an jqLite object with the content?

  2. And how can I find the option with #pselect? I want to remove that manually, keeping in mind that it can be in any order in the options.

Upvotes: 2

Views: 6689

Answers (2)

Grundy
Grundy

Reputation: 13381

How to find element by id in Angular's jqLite element object

Id should be unique on page, so you can just find it with document.getElementById, or document.querySelector and then wrap it in jqLite element.

var pselect = angular.element(document.getElementById('pselect'));

this works for:

<option id="pselect" value="">

but if you have in html:

<option id="#pselect" value="">

you should use:

var pselect = angular.element(document.getElementById('#pselect'));

i just want to locate that and remove it dynamically so that user not able to see the option in select.

in this case you can simple use ng-if directive:

<select class="vehicleTypeDropdown" id="vehicleType">
    <option id="pselect" ng-if="condition" value="">Please Select</option>
    <option ng-repeat="types in selectedType" value="Vt3" class="ng-scope ng-binding">vt3</option>
    <option ng-repeat="types in selectedType" value="Vt4" class="ng-scope ng-binding">vt4</option>
</select>

if condition true, element added in DOM, if not - not

if this code works:

$vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

and you get right object, then on your page also included full jQuery, because as you can see in jqLite source, find function is simple

find: function(element, selector) {
    if (element.getElementsByTagName) {
        return element.getElementsByTagName(selector);
    } else {
        return [];
    }
},

Upvotes: 0

vorant
vorant

Reputation: 708

Use id without # like id="pselect"

<select class="vehicleTypeDropdown" id="vehicleType">
    <option id="pselect" value="">Please Select</option>
    <option ng-repeat="types in selectedType" value="Vt3" class="ng-scope ng-binding">vt3</option>
    <option ng-repeat="types in selectedType" value="Vt4" class="ng-scope ng-binding">vt4</option>
</select>

catch element like this

var elem = angular.element(document.querySelector('#pselect'))
elem.remove()

http://jsfiddle.net/vorant/4sbux96k/1/

Upvotes: 5

Related Questions