1

"Sorry for my English as it is not my native language"

On to the problem. I have a trouble with ng-autocomplete when I dynamically create form fields.

The ng-autocomplete works fine when I create an input tag in the index file but when I try to add more tags via the javascript function the ng-autocomplete does not work in the new input tags created..

enter image description here

As you see in the picture the two input fields "Travel from" and "Travel to" have ng-autocomplete but the input field "travel via" which is created by the javascript function does not have ng-autocomplete..

The question is how can I add a working ng-autocomplete for every created input field via the function?

Down below is the script.js file with the code for creating the input tag 

$(document).ready(function(){
  var i=1;
 $("#add_city").click(function(){

  $('#end_city'+i).html('<input type="text" class="form-control input-lg ng-isolate-scope" name="via_city" ng-autocomplete="via_city" placeholder="Travel via" autocomplete="off" />');

  $('#tab_logic').append('<div id="end_city'+(i+1)+'"></div>');
  i++; 
});

 $("#delete_city").click(function(){

     if(i>1){
     $("#end_city"+(i-1)).html('');
     i--;
     }
 });

});

And there is the index.php 

    <div class="page-header">
    <h4>Create your trip</h4>
</div>


<form ng-submit="submitTrip()"> <!-- ng-submit will disable the default form action and use our function -->

    <!-- START CITY -->
    <div class="form-group col-md-6">
        <input type="text" class="form-control input-lg" name="start_city" ng-autocomplete="tripData.start_city" placeholder="Travel from">
    </div>

            <!-- END CITY -->                
            <div class="form-group col-md-6" id="tab_logic">
                <div id="end_city0">
                    <input type="text" class="form-control input-lg" name="end_city" ng-autocomplete="tripData.end_city" placeholder="Travel to">

                </div>
                <div id="end_city1"></div>
            </div>



    <!-- START DATE -->
    <div class="form-group col-md-6">
        <input type="date" class="form-control input-lg" name="start_date" ng-model="tripData.start_date" placeholder="Travel date">
    </div>

    <!-- END DATE -->
    <div class="form-group col-md-6">
        <input type="date" class="form-control input-lg" name="end_date" ng-model="tripData.end_date" placeholder="Return date">
    </div>

    <!-- COMMENT -->
    <div class="form-group col-md-12">
        <textarea class="form-control input-lg" name="comment" ng-model="tripData.comment"></textarea>
    </div>

    <!-- Img -->
    <div class="form-group col-md-12">
        <input type="text" class="form-control input-lg" name="img" ng-model="tripData.img" placeholder="Image source">
    </div>

    <!-- SUBMIT BUTTON -->
    <div class="form-group text-right"> 
        <button type="submit" class="btn btn-primary btn-lg">Submit</button>
    <a id="add_city" class="btn btn-default pull-left">Add City</a><a id='delete_city' class="pull-right btn btn-default">Delete City</a>
            </div>
</form>

I have looked at these two examples and I dont know why it does not work.. Please if anybody knows how to fix this problem it would help a lot :)

http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview

http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion

Thanks!

/K.A.

Kahin
  • 455
  • 2
  • 9
  • 21

1 Answers1

1

You need to compile the element by using the $compile service:

...

$('#tab_logic').append('<div id="end_city' + (i + 1) + '"></div>');

var element = angular.element(document.querySelector('#end_city' + i));
var scope = element.scope();
var $compile = element.injector().get('$compile');
$compile(element)(scope);

...

Good short explanation of how to work with Angular from the 'outside' can be found here.

Community
  • 1
  • 1
tasseKATT
  • 38,470
  • 8
  • 84
  • 65