Utilize JQuery to choose the angular element

Can Angular tags be selected using JQuery? I am currently utilizing the ui-select Angular component, which is integrated into the HTML page as shown below:

<ui-select ng-model="rec.currencyCode" on-select="ctrl.selectCurrencyCode(rec, $item)">
    <ui-select-match placeholder="{{ 'SelectCurrency' | resource:'GuiText' }}">
        <span ng-bind="$select.selected"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in ctrl.currencies">
        <span ng-bind-html="item.codeA3"></span><br />
    </ui-select-choices>
</ui-select>

However, attempts to select the tag with JQuery using these two selectors have proven unsuccessful:

$("ui-select").each(function () {
}

$("select").each(function () {
}

UPDATE: The JQuery code is executed from a TypeScript controller:

    validate(): boolean {
        var that = this;

        this.errors = [];

        var inputs = $("input[format='number']");
        inputs.each(function () {
            var str = $(this).val();
            if (str != null && str.length > 0) {
                var val = parseFloat(str);
                if (isNaN(val)) {
                    that.addError($(this).parent().attr("val-property"), "Value is not a number");
                }
            }
        });

        var currencyCodes = $("ui-select");
        currencyCodes.each(function () {
            var str = $(this).val();
            console.log(this);
            console.log(str);
            if (str == null) {
                that.addError($(this).parent().attr("val-property"), "Currency not selected");
            }
        });

        return this.errors.length == 0;
    }

Answer №1

Upon further examination, it appears that the ui-select component in Angular is actually being replaced by a div element, meaning there is no actual select element for the combo box.

<div class="currencyCode ui-select-container ui-select-bootstrap dropdown ng-valid" ng-class="{open: $select.open}" ng-model="rec.currencyCode" on-select="ctrl.selectCurrencyCode(rec, $item)" data-original-title="" title="">
...

Answer №2

(function() {


    var angularTag = $("ui-select");
    angularTag.each(function() {
      $('.result').text('Number of elements in DOM:' + angularTag.length);
      console.log(angularTag);
    });


})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ui-select ng-model="rec.currencyCode" on-select="ctrl.selectCurrencyCode(rec, $item)">
  <ui-select-match placeholder="{{ 'SelectCurrency' }}">
    <span ng-bind="$select.selected"></span>
  </ui-select-match>
  <ui-select-choices repeat="item in ctrl.currencies">
    <span ng-bind-html="item.codeA3"></span>
    <br />
  </ui-select-choices>
</ui-select>


<div class="result"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ES6 proxy to intercept ES6 getter functions

I have implemented a proxy to track all property access on instances of a class, demonstrated in the code snippet below: class Person { public ageNow: number; public constructor(ageNow: number) { this.ageNow = ageNow; const proxy = new Proxy( ...

Having trouble limiting the number of special characters in AngularJS

I am having trouble restricting special characters and spaces in the input text field. I tried using the following code snippet: ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" to prevent special characters, but it doesn't seem to be workin ...

Utilize the serialized data to pre-fill the form fields

After using the serialize() function on my form and saving the string, I am now looking for a function that can repopulate values back into the form from the serialized string. Is there such a function available? ...

What is the reason behind the ability to reassign an incompatible function to another in TypeScript?

I discovered this question while using the following guide: https://basarat.gitbooks.io/typescript/content/docs/types/type-compatibility.html#types-of-arguments. Here is an example snippet of code: /** Type Heirarchy */ interface Point2D { x: number; y: ...

Arranging elements using the ng-repeat directive in AngularJS

My question pertains to an array I am working with: $scope.answers=["","","",""] This array contains several empty elements. <li ng-repeat="item in answers "><input type="text" ng-model="item"/></li> When running this code, an error i ...

After the page reload, the text box remains filled and does not reset to null

Even after refreshing the page, the text box does not reset to null. It retains the value that was entered previously. This issue occurs while implementing pagination. <form method='post' class="search" action="<?= base_url() ?>my-subsc ...

Autofill Dropdown in AngularJS Using Data from Previous Page

Despite searching extensively on StackOverFlow, I was unable to find the answer I needed. So, I am posting my question below. I have a form that includes a dropdown menu. When a user clicks a button, they are taken to a new HTML page with additional infor ...

Tips for showing an image during an asynchronous postback

I've implemented an Ajaxable application with UpdateProgress for each postBack event, and it's all working perfectly. Now, I'm looking to add another Indicator in my SiteMapPath bar to show that a postback is taking place at any given time. ...

Adjust the text area to automatically expand or shrink based on the text it contains

Is there a way to automatically adjust the size of a textarea based on its content? Here is the code I am currently using for this purpose: var element = document.getElementById(event.target.id); var content = $(this).val().trim(); if (content == "") { ...

Retrieving a variable from a JSON array with multiple dimensions using jQuery

Currently, I am working on fetching a multidimensional JSON array using JQUERY. I am facing challenges in extracting specific items from the array and inserting them into the HTML. I need assistance in navigating through the array to retrieve these elemen ...

Enhance your mouse movement for optimal efficiency

I am looking to implement a feature on a webpage where a menu is displayed whenever the cursor is near the edge of a <div>. One way to achieve this is by using the .mousemove function to track the cursor position and show/hide the menu based on proxi ...

Float and tap

Can someone assist me with my code? I have 4 identical divs like this one, and when I hover over a link, all the elements receive the same code. <div class="Person-team"> <div class="profile-pic-d"> <a cl ...

Personalized AngularJS required text

After utilizing the built-in AngularJS directive required and encountering a validation error, I receive a small popup near the field displaying "Please fill out this field". My issue lies in needing the text to be displayed in another language. How should ...

Combining QuaggaJS with Angular

I recently came across a barcode scanner known as QuaggaJS. However, as I explored the examples provided, I found myself uncertain on how to incorporate it into Angular. The demo showcased at heavily relies on jQuery. What would be the most effective me ...

Code exists in the French language

My expertise does not lie in encodings... I am working on a website that incorporates various languages. The database is set to store content in UTF-8. Content retrieved from the database using jQuery and AJAX is not being displayed properly. For exampl ...

The Vue property I customized in my component is not being recognized by VSCode(Vetur)

I've successfully implemented a plugin in Vue by declaring it in a main.ts file, defining its type in a plugin.d.ts file, and utilizing it in a component.vue file. Although the compilation is error-free, I am encountering an issue with VSCode intellis ...

Looking for a specific phrase in the data entered by the user

I am dealing with data in ckeditor that looks like this: <p>test 1</p> <p>test 2</p> <p><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICw ...

Clicking on the Angular custom accordion component does not trigger the expansion feature

I have developed a customized accordion component using Angular 9, but I am encountering an issue. Whenever I click on the accordion, only the first button's window expands while the others remain unaffected. To demonstrate the problem more effective ...

Generate a specified quantity of elements using jQuery and an integer

I am working with a json file that contains an items category listing various items through an array. This list of items gets updated every few hours. For example: { "items": [ { "name": "Blueberry", "img": "website.com/blueberry.png" } ...

Encountering the error [object Object] when passing variables through Ajax, jQuery, and JSON

I am having an issue passing an array with JSON in PHP: $array = array ($a, $b, $c); echo json_encode($array); and then trying to utilize it in jQuery like this: $(function () { $.ajax({ url: 'api.php', data: "", da ...