Question

＆＃34;对不起我的英语，因为它不是我的母语＆＃34;

关于问题。当我动态创建表单字段时，我遇到了ng-autocomplete问题。

当我在索引文件中创建输入标记时，ng-autocomplete正常工作但是当我尝试通过javascript函数添加更多标记时，ng-autocomplete在新的输入标记中不起作用创建..

enter image description here

如图所示，两个输入字段＆＃34;来自＆＃34;和＆＃34;前往＆＃34;有ng-autocomplete但输入字段＆＃34;通过＆＃34;由javascript函数创建的没有ng-autocomplete ..

问题是如何通过函数为每个创建的输入字段添加工作的ng-autocomplete？

下面是 script.js 文件，其中包含用于创建输入标记的代码

$(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--;
     }
 });

});

还有 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>

我看过这两个例子，我不知道为什么它不起作用..如果有人知道如何解决这个问题，那将会有很多帮助:)

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

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

谢谢！

/K.A。

Answer 1

您需要使用$compile服务编译元素：

...

$('#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);

...

如何与来自＆＃39; outside＆＃39;之间的Angular合作的简短解释。可以找到here。

在通过Javascript动态创建输入标记时，将ng-autocomplete添加到输入标记

1 个答案: