У меня есть модальная форма, где я хотел бы иметь поле с автозаполнением в моей модальной форме.
Для этого я использую md-autocomplete
из angular-material#1.1.0
, который предоставляет такую функциональность и прост в использовании.
Проблема в том, что когда я пишу что-то в этом поле, за моим модальным окном появляется весь список предложений, но он должен отображаться поверх этой модальной формы.
У вас есть идеи, как решить эту проблему?
Я прилагаю html-код источника формы и соответствующего контроллера angular.
movie-resource-dialog-controller.js
(function() {
'use strict';
angular
.module('vodApp')
.controller('MovieResourceDialogController', MovieResourceDialogController);
MovieResourceDialogController.$inject = ['$http', '$timeout', '$scope', '$stateParams', '$uibModalInstance', 'DataUtils', 'entity', 'MovieResource', 'Movie'];
function MovieResourceDialogController ($http, $timeout, $scope, $stateParams, $uibModalInstance, DataUtils, entity, MovieResource, Movie) {
var vm = this;
vm.movieResource = entity;
vm.clear = clear;
vm.byteSize = DataUtils.byteSize;
vm.openFile = DataUtils.openFile;
vm.save = save;
$timeout(function (){
angular.element('.form-group:eq(1)>input').focus();
});
function clear () {
$uibModalInstance.dismiss('cancel');
}
function save () {
vm.isSaving = true;
if (vm.movieResource.id !== null) {
MovieResource.update(vm.movieResource, onSaveSuccess, onSaveError);
} else {
MovieResource.save(vm.movieResource, onSaveSuccess, onSaveError);
}
}
function onSaveSuccess (result) {
$scope.$emit('vodApp:movieResourceUpdate', result);
$uibModalInstance.close(result);
vm.isSaving = false;
}
function onSaveError () {
vm.isSaving = false;
}
vm.setResource = function ($file, movieResource) {
if ($file && $file.$error === 'pattern') {
return;
}
if ($file) {
DataUtils.toBase64($file, function(base64Data) {
$scope.$apply(function() {
movieResource.resource = base64Data;
movieResource.resourceContentType = $file.type;
});
});
}
};
vm.querySearchMoviesLike = function (query) {
Movie.queryByTitle({
title: query
}, onSuccess, onError);
function onSuccess(data, headers) {
vm.proposedMovies = data;
}
function onError(error) {
AlertService.error(error.data.message);
}
return vm.proposedMovies;
}
}
})();
movie-resource-dialog.html
<div class="form-group">
<label class="control-label">Movie Title</label>
<md-autocomplete flex
md-selected-item="vm.selectedMovie"
md-search-text="vm.searchMovieTitle"
md-items="item in vm.querySearchMoviesLike(vm.searchMovieTitle)"
md-item-text="title"
md-delay="300">
<div layout="row" class="item" layout-align="start center">
<img data-ng-src="{{'data:' + item.posterContentType + ';base64,' + item.poster}}" style="width: 40px;" />
<span md-highlight-text="vm.searchMovieTitle">{{item.title}}</span>
</div>
</md-autocomplete>
</div>
Скриншот (выглядит так): https://i.stack.imgur.com/P6Ln3.png
Спасибо, Люк