How to use angular variable in jQuery code

Question

I have an input which uses angular to generate a list of names, and I want each name to be a link that submits the form with the 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>

The .val({({ artist })}); is where I want to inject whatever the value of {({ artist })} is, since I want the link to submit the form with the name as the value. How can I get the angular variable into the jquery?

That would be a terrible way to do this. Why not just make this form a part of your directive and handle the click from it? That would be the proper way to get it done. — Jibi Abraham
– Jibi Abraham, Commented Dec 1, 2014 at 7:33
I'm open to trying that, I haven't learned how. Maybe you could link me to something like it. — ian-campbell
– ian-campbell, Commented Dec 1, 2014 at 7:35
Well, it seems the docs had everything you needed, including a plnkr code demo. Find it at docs.angularjs.org/api/ng/filter/filter — Jibi Abraham
– Jibi Abraham, Commented Dec 1, 2014 at 7:48

Sudharsan S · Accepted Answer · 2014-12-01 07:32:44Z

1

try

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

answered Dec 1, 2014 at 7:32

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai Dinculescu · Accepted Answer · 2014-12-01 07:33:09Z

1

There's no easy way to achieve that.

However, in your case, you can easily use:

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

answered Dec 1, 2014 at 7:33

Mihai Dinculescu

20.1k8 gold badges58 silver badges70 bronze badges

Comments

user3589536 · Accepted Answer · 2014-12-01 08:48:17Z

1

You are combining two technologies that are not really compatible. It would be better if you choose to only use AngularJS in your site or only JQuery.

But to answer your question in jquery if you want the value to be the text in the anchor:

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

Alternatively if you would like to solve this problem in an Angular way do the following:

Create a method in your controller (mycontroller) called clickMe and bind the value of the anchor to the search textbox. You would have to move your controller up in your code so that the search box and the table is part of the same controller.

<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');
                });
            });
        }
    };
});

edited Dec 1, 2014 at 8:48

answered Dec 1, 2014 at 7:42

user3589536

2141 silver badge5 bronze badges

4 Comments

ian-campbell Over a year ago

Where in my controller do I inject that scope snippet?

ian-campbell Over a year ago

Currently that pure angular code is not generating links.

user3589536 Over a year ago

Check out the controller documentation here: docs.angularjs.org/guide/controller. The "Simple Spicy Controller" Example has a controller method like the one defined above

user3589536 Over a year ago

Right you also want to submit the form... I missed that part. That is why the other guy suggested that you need a directive. Directives are used for accessing html code directly. So instead of going $('form').submit() like you might have done in jquery you now have to write a custom directive. See this example. jsfiddle.net/unWF3 I will edit the answer above just now.

Collectives™ on Stack Overflow

How to use angular variable in jQuery code

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related