leesider leesider - 5 months ago 72
AngularJS Question

Ng-repeat autocomplete only works on first text box

I have a web app that uses AngularJS and jQuery to perform create, read, update and delete on a list of hotels:http://jgdoherty.org/.
When "edit" is selected I am using jQuery autocomplete to populate the "County" text box. However the autocomplete only works on the first "County" text box in the list. If you look at the javascript code it has the autocomplete directive set on the text box that has the id "cty". You can see the entire js code here:http://jgdoherty.org/Scripts/Emp.js
The edit code is just this section of it (which is what I need to change):

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


I know it is something to do with the every text box after the first one being seen as a "child" but apart from that I am stuck.

Answer

I resolved this after much googling. In the cshtml file (Index.cshtml) I put a hidden field:

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

In the js file (http://jgdoherty.org/Scripts/Emp.js) I added the following

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

in the body of

change: function (event, ui) { 
}

There was a slight mistake in $('#cty').autocomplete('option', 'source', aSearch);. It should have been

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

I added

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

to the save event: $scope.save = function (hotel) {

(under id = hotel.HotelId;)

It now does automplete under all the "county" text boxes.