Ng-repeatオートコンプリートは、最初のテキストボックスでのみ動作します

Question

AngularJSとjQueryを使用して、ホテルのリストの作成、読み取り、更新、削除を実行するWebアプリケーションがあります：http://jgdoherty.org/ 「編集」を選択すると、jQueryオートコンプリートを使用して「郡」テキストボックスに入力します。ただし、オートコンプリートはリストの最初の「郡」テキストボックスでのみ機能します。 javacriptコードを見ると、idが "cty"のテキストボックスにオートコンプリート指示が設定されています。編集コードは（私は変更するために必要なものである）、それだけのこのセクションでhttp://jgdoherty.org/Scripts/Emp.js ：あなたはここにjsのコード全体を見ることができます

$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

私は多くのグーグルでこれを解決しました。私は

change: function (event, ui) { 
} 

の次

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

で体を追加しました（http://jgdoherty.org/Scripts/Emp.js）のjsファイルで

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

：CSHTMLファイル（Index.cshtml）で、私は隠しフィールドを置きます

$（ '＃cty'）。autocomplete（ 'option'、 'source'、aSearch）;に多少の間違いがありました。。それは私がイベントを保存する

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

を追加

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

されている必要があります：ID = hotel.HotelId下$ scope.save =機能（ホテル）{

（;）

これで、すべての「郡」テキストボックスの下に自動完成します。

Answer 2

angular-autocompleteをお試しください。場合によっては、JqueryとAngularjsを混在させるとバインディングの問題が発生します。