我有一个模态表单,我想在其中添加一个自动完成字段。
为了实现这一点,我使用了来自angular-material#1.1.0的md-autocomplete,它提供了这样的功能并且易于使用。
问题是当我在这个字段中输入内容时,整个建议列表出现在我的模态窗口后面,但它应该出现在这个模态表单的顶部。
你有任何解决这个问题的想法吗?
我附上了表单源代码和相关的angular控制器。
movie-resource-dialog-controller.js
屏幕截图(看起来是这样的):https://istack.dev59.com/P6Ln3.webp 谢谢,Luke
为了实现这一点,我使用了来自angular-material#1.1.0的md-autocomplete,它提供了这样的功能并且易于使用。
问题是当我在这个字段中输入内容时,整个建议列表出现在我的模态窗口后面,但它应该出现在这个模态表单的顶部。
你有任何解决这个问题的想法吗?
我附上了表单源代码和相关的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://istack.dev59.com/P6Ln3.webp 谢谢,Luke