Apply Jquery widgets on element Dynamically created with ng-repeat

Question

I am trying to use the jQuery auto-complete widget by using the class attribute of an element which is dynamically created using ng-repeat. So far it's not working for dynamically created elements.

What I have tried so far is:

When I apply it on static created input box, it works properly.

angularcontroller.js

$('.auto').autocomplete({       
      source: function(request, response) {
         $.ajax({
            url: "/auto",
            type: "GET",
            data: request,  // request is the value of search input
            success: function (data) {
              // console.log("data>>>"+JSON.stringify(data));
              // Map response values to fiedl label and value
               response($.map(data, function (el) {
                  return {
                     value: el.name,
                    label: el.name
                  };
                  }));
               }
            });
         }      
  })

html file

<tr ng-repeat="rowContent in dataRows" style="text-align:center">
   <td>
     <input type="text" width="80px">
   </td>
</tr>

Have a look at this. http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs — Rohan Büchner, Apr 28 '15 at 10:06
You have to run "autocomplete" method AFTER the code generation with ng-repeat. — Michael, Apr 28 '15 at 10:07
That being said, it's considered best practice to wrap jQuery (or 3rd party) elements in directives. Which will solve this problem for you. Here's a decent example. https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ — Rohan Büchner, Apr 28 '15 at 10:08

Yashika Garg · Answer 1 · 2015-04-30T09:41:05.650

1

As a general rule, all DOM manipulations should be part of directive. You should be accessing the element in the directive's link function and then set autocomplete on it

app.directive("myautocomplete", function(){
   return{
    restrict: 'A',
    scope: {
        suggestions: "="
    },
    link: function(scope, element, attrs){
        scope.$watch("suggestions", function(newV){
            if(newV && newV.length > 0)
            {
                $(element).autocomplete({
                    source: scope.suggestions
                });
            }
        });
    }
   };
});

"suggestions" is array of words that you want to pass for autocomplete to show.

html

<div>
   <input type="text" myautocomplete suggestions="suggestions" /></label>
</div>

Here "myautocomplete" is directive name and "suggestions" is passed in Scope with two-way binding.

edited Apr 30 '15 at 09:41

answered Apr 28 '15 at 10:17

Yashika Garg

2,346
2
15
17

yashika can u tell me what attribute i need where i use this myautocomplete directive – Shubham Gupta Apr 28 '15 at 11:51
@ShubhamGupta I have edited my code to include the html which would use this directive. Please let me know if anything else is required. – Yashika Garg Apr 28 '15 at 15:33
Thnx in advance yashika , let me try – Shubham Gupta Apr 29 '15 at 04:26

Apply Jquery widgets on element Dynamically created with ng-repeat

1 Answers1