javascript - Angular - Use $index to load product images -
i have following form in angularjs app:
<li ng-repeat="device in devices track $index"> <div class="db-handset-image"> <span class="phone-silhouette"></span> {{ relative image here }} </div> <div class="db-device"> <ul class="opts"> <li> <select name="manufacturer[ [[$index]] ]" ng-model="selectedmanufacturer" ng-change="getmanufacturermodels(selectedmanufacturer)"> <option value="">manufacturer</option> <option ng-repeat="manufacturer in manufacturers" value="[[manufacturer.id]]">[[manufacturer.name]]</option> </select> </li> <li> <select name="device[ [[$index]] ]" ng-model="selectedmodel" ng-change="loadmodelimage(selectedmodel, $index)"> <option value="">model</option> <option ng-repeat="model in manufacturermodels" value="[[model.id]]">[[model.model + ' ' + model.variants[$index].memory + ' ' + model.variants[$index].colour]]</option> </select> </li> </ul> </div> </li>
what happens in form user select manufacturer first dropdown , model model dropdown. model dropdown populate relative models after manufacturer has been selected using angular's $filter.
when user has selected model, loadmodelimage
fired , needs happen here after model selection, model image loaded {{relative image here}}
placeholder. being done so:
$scope.loadmodelimage = function (modelid, $index) { $http.get(ajaxurl + '?action=get_handset&hid=' + modelid) .success(function (data) { $scope.selectedhandsets++; $scope.modelimages.splice(0, 0, data.handset.images); }) }
this issue if replace relative image here
placeholder text <img>
loading in model images, each model that's been selected appears in every row.
my other issue if remain on same 'row' (see below screenshot) , change handset image, array of images pushed $scope.modelimages when in fact images 'row' should overwritten new selection.
to give clear understanding of how form looks, here's screenshot:
when click 'add new handset' row containing dropdowns visually duplicated , can add select handset.
i hope problem's explained enough, q's ask.
Comments
Post a Comment