Guidelines for incorporating Angular variables into jQuery scripts

Question

Guidelines for incorporating Angular variables into jQuery scripts

I have a form with an input field that dynamically generates a list of names using Angular. My goal is to turn each name into a clickable link that will submit the form with that specific name as the input value.

<form method="POST" action="/results/" id="artform">
{% csrf_token %}
   Search:<input type="text" name="search" ng-model="search" />
          <input type="submit" value="Submit" /> 
</form>
<table ng-controller="mycontroller">
    <tr ng-repeat="artist in artists | filter:search | limitTo:10">
        <td ng-hide="!search">
            <a class="click-me" href="javascript:$('#artform').submit();">
                 {({ artist })}
            </a>
        </td>
    </tr>
</table>

<script>
  (function ($){
    $(function () {
        $('body').delegate('.click-me', 'click', function (){
            $('input[name="search"]').val({({ artist })});
        });
    });
})(jQuery);    
</script>

In the part where I have .val({({ artist })});, my aim is to insert the actual value of {({ artist })} because I want the link to trigger the form submission with the selected name as the value. How can I pass the Angular variable to jQuery for this functionality?

javascript jquery angularjs forms

Answer 1

Answer №1

attempt

$('section').on('click', '.press-button', function (){
           let painter = $(this).text();
           $('input[name="find"]').val(painter);
 });

Answer 2

attempt

$('section').on('click', '.press-button', function (){
           let painter = $(this).text();
           $('input[name="find"]').val(painter);
 });

Answer 3

Answer №2

It's not a simple task to accomplish.

But for your situation, you have the option to conveniently utilize:

$('input[name="search"]').val($(this).text());

Answer 4

It's not a simple task to accomplish.

But for your situation, you have the option to conveniently utilize:

$('input[name="search"]').val($(this).text());

Answer 5

Answer №3

When combining AngularJS and JQuery, it is important to note that they may not always be compatible with each other. It is recommended to use either AngularJS or JQuery exclusively in your website for a smoother integration.

For those looking to achieve a specific functionality in JQuery, here is an example code snippet:

 $('body').delegate('.click-me', 'click', function (){
            $('input[name="search"]').val($(this).text());
        });

If you prefer solving the issue using AngularJS, follow these steps:

In your controller (mycontroller), create a method called clickMe which binds the value of the anchor to the search textbox. Ensure that both the search box and table are part of the same controller by adjusting your code accordingly.

<div ng-controller="mycontroller">
<form method="POST" action="/results/" submit-on="clickMeEvent">
{% csrf_token %}
   Search:<input type="text" name="search" ng-model="search" />
          <input type="submit" value="Submit" /> 
</form>
<table >
    <tr ng-repeat="artist in artists | filter:search | limitTo:10">
        <td ng-hide="!search">
            <a ng-click="clickMe(artist)">
                 {({ artist })}
            </a>
        </td>
    </tr>
</table>
</div>

Controller:

  $scope.clickMe = function (artist) {
     $scope.search = artist;
     $scope.$broadcast('clickMeEvent');
};

Directive:

app.directive('submitOn', function() {
    return {
        link: function(scope, elm, attrs) {
            scope.$on(attrs.submitOn, function() {
                //We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own)
                setTimeout(function() {
                    elm.trigger('submit');
                });
            });
        }
    };
});

Answer 6

When combining AngularJS and JQuery, it is important to note that they may not always be compatible with each other. It is recommended to use either AngularJS or JQuery exclusively in your website for a smoother integration.

For those looking to achieve a specific functionality in JQuery, here is an example code snippet:

 $('body').delegate('.click-me', 'click', function (){
            $('input[name="search"]').val($(this).text());
        });

If you prefer solving the issue using AngularJS, follow these steps:

In your controller (mycontroller), create a method called clickMe which binds the value of the anchor to the search textbox. Ensure that both the search box and table are part of the same controller by adjusting your code accordingly.

<div ng-controller="mycontroller">
<form method="POST" action="/results/" submit-on="clickMeEvent">
{% csrf_token %}
   Search:<input type="text" name="search" ng-model="search" />
          <input type="submit" value="Submit" /> 
</form>
<table >
    <tr ng-repeat="artist in artists | filter:search | limitTo:10">
        <td ng-hide="!search">
            <a ng-click="clickMe(artist)">
                 {({ artist })}
            </a>
        </td>
    </tr>
</table>
</div>

Controller:

  $scope.clickMe = function (artist) {
     $scope.search = artist;
     $scope.$broadcast('clickMeEvent');
};

Directive:

app.directive('submitOn', function() {
    return {
        link: function(scope, elm, attrs) {
            scope.$on(attrs.submitOn, function() {
                //We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own)
                setTimeout(function() {
                    elm.trigger('submit');
                });
            });
        }
    };
});

Guidelines for incorporating Angular variables into jQuery scripts

Answer №1

Answer №2

Answer №3

Similar questions

React Checkbox Sum Component - Effortlessly Improve User Experience

Easily refresh multiple select options by using the ajax updater function in prototype

AngularJS directive called 'dataSharing' operates

Utilizing Vue JS to set an active state in conjunction with a for loop

TextGeometry failing to render

Protractor unable to locate elements using by.repeater

What is the appropriate utilization of the await keyword within concise if-else statements in JavaScript?

Necessary Input Field in React Form Does Not Mandate Text Input

Failure to trigger custom event on FB pixel

Utilizing the Jackson Framework in Spring Boot for effective mapping with @RequestBody annotation

Creating a read-only DIV using Angular - a step-by-step guide

Is there a way to automate the duplication/copying of files using JavaScript?

What is the proper way to implement v-model for a custom component within the Vue render function?

The accordion seems to be stuck in the open position

Is there a Joomla extension available that can display or conceal content upon clicking?

Tips for maximizing image efficiency using Next.js and Amazon S3

Guide to authenticating in ServiceStack with Angular SPA using basic authentication

sending an array from Javascript to PHP

I am facing an issue with file manipulation within a loop

Exploring Javascript/JQuery parameters based on data types