Ng重复自动完成仅适用于第一个文本框

Question

我有一个使用AngularJS和jQuery在酒店列表中执行创建，读取，更新和删除的Web应用程序：statement by one of the developers。 当选择“编辑”时，我使用 jQuery自动完成来填充“县”文本框。但是，自动完成功能仅适用于列表中的第一个“县”文本框。如果您查看javascript代码，则会在文本框中设置自动填充指令，其ID为“ cty ”。你可以在这里看到整个js代码：http://jgdoherty.org/ 编辑代码就是它的这一部分（这是我需要改变的）：

 $scope.toggleEdit = function (hotel) {
            id = hotel.HotelId;
                    var array = [];
            $('#cty').autocomplete({

                source: $scope.availableTags,
                change: function (event, ui) {


                },
                messages: {
                    noResults: '',
                    Results: ''
                },

                search: function (oEvent, oUi, request, response) {


                    $.ajax({
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                       url: "http://jgdoherty.org/api/Counties/GetCounties",
                        // data: //document.getElementById('txtCounty').value,
                        dataType: "json",
                        success: function (data) {
                            if (data != null) {

                                response(data.d);

                            }
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    }).done(function (data) {

                        ($.each(data, function (val) {


                            array.push($.trim(data[val].CountyName));


                        }

                        )

                        );


                        return (array);

                    }

                     )
                    .always(function (data) {

                    })


                    // get current input value
                    var sValue = $(oEvent.target).val();

                    // init new search array
                    var aSearch = [];

                    // for each element in the main array ...
                    $(array).each(function (iIndex, sElement) {

                        // ... if element starts with input value ...
                        if ($.toString(sElement.substr(0, sValue.length)).toUpperCase == $.toString(sValue).toUpperCase) {

                            // ... add element
                            aSearch.push($.trim(sElement));


                        }
                    });
                    // change search array

                    $('#cty').autocomplete('option', 'source', aSearch);


                    array = [];
                },
                position: {

                },
                select: function (event, ui) {
                    dacounty2 = ui.item.value;                                   


                }

            });


            this.hotel.editMode = !this.hotel.editMode;
        };

我知道在第一个文本框被视为“孩子”后，它与每个文本框有关，但除此之外我被卡住了。

Answer 1

尝试使用angular-autocomplete。有时当你混合Jquery和Angularjs时会产生绑定问题。

Answer 2

我在google搜索后解决了这个问题。在cshtml文件（Index.cshtml）中我放了一个隐藏字段：

<input type="hidden" id="selectedCountry" value="" />

在js文件（http://jgdoherty.org/Scripts/Emp.js）中，我添加了以下内容

event.preventDefault();                    
                var selectedObj = ui.item.value;                 
                $('#selectedCountry').val(selectedObj);

在

的主体

change: function (event, ui) { 
}

$（＆＃39;＃cty＆＃39;）。自动填充（＆＃39;选项＆＃39;，＆＃39; source＆＃39;，aSearch）; 。应该是

$('.cty').autocomplete('option', 'source', aSearch);

我添加了

hotel.County = $('#selectedCountry').val();

到保存事件： $ scope.save = function（hotel）{

（在 id = hotel.HotelId; 下）

它现在在所有＆＃34;县＆＃34;下自动完成。文本框。