UI Bootstrap Typeahead 不显示异步返回的值
UI Bootstrap Typeahead is not displaying the values returned async
我正在尝试使用 UI Bootstrap Typeahead 对数据库中的数据 select 进行自动完成搜索。
我的服务 returns 数据在我的响应中,但数据未在组件中列出。
当我在组件代码中下断点时,列表就在那里,当我继续调试时会显示列表,但如果不设置断点运行,则不会显示列表。
HTML
<input id="inputInstalation"
ng-model="profile.instalation"
typeahead-editable="false"
typeahead="installation as installation.name for installation in searchInstallation($viewValue)"
typeahead-input-formatter="formatLabel($model)"
ng-required="true">
控制器
$scope.searchInstallation = function(text){
return $http.get('/api/installations/name/' + text).then(function(response){
return response.data;
});
};
$scope.formatLabel = function(model){
return model ? model.name : "";
};
API NodeJS-数据库 Mongo
exports.findByName = function(req, res){
var connection = getConnection();
var Installation = getInstallationModel(connection);
Installation.find({name: new RegExp(req.params.name, "i")}, function (err, result) {
connection.close();
if(err) throw err;
res.json(result);
});
};
回应
[{ _id: 5525662b74100eb40f13ce00,
name: 'test 2',
description: 'Gdoc 02.02.00-00',
__v: 0,
services:
[ { name: 'Alfresco',
context: '/alfresco',
parameterURL: 'prmGdocServiceUrl',
_id: 5525662b74100eb40f13ce03 },
{ name: 'ri-rest',
context: '/iserver',
parameterURL: 'prmUrlIntegrationServer',
_id: 5525662b74100eb40f13ce02 },
{ name: 'ldap',
parameterURL: 'prmLdapUrl',
parameterUser: 'prmLdapPrincipal',
parameterPassword: 'prmLdapPassword',
_id: 5525662b74100eb40f13ce01 } ],
tables:
[ { _id: 5525662b74100eb40f13ce06, name: 'esegsistema' },
{ _id: 5525662b74100eb40f13ce05, name: 'esegusuario' },
{ _id: 5525662b74100eb40f13ce04, name: 'XPTO' } ],
parameters:
[ { name: 'prmUrlBaseServidorHTTP',
systemCode: '314',
_id: 5525662b74100eb40f13ce0e },
{ name: 'prmTamanhoMaximoArquivo',
systemCode: '314',
_id: 5525662b74100eb40f13ce0d },
{ name: 'prmGdocServiceUrl',
systemCode: '314',
_id: 5525662b74100eb40f13ce0c },
{ name: 'prmLdapUrl',
systemCode: '314',
_id: 5525662b74100eb40f13ce0b },
{ name: 'prmLdapPrincipal',
systemCode: '314',
_id: 5525662b74100eb40f13ce0a },
{ name: 'prmLdapPassword',
systemCode: '314',
_id: 5525662b74100eb40f13ce09 },
{ name: 'prmDomainSufix',
systemCode: '314',
_id: 5525662b74100eb40f13ce08 },
{ name: 'xxxxx',
systemCode: '314',
_id: 5525662b74100eb40f13ce07 } ] }]
我发现了问题,我正在使用 https://github.com/McNull/angular-block-ui 并且它与组件冲突。
解决方案:我从 angular blockui 创建了一个 requestFilter,以不阻止将组件发送到 API 的请求。
我正在尝试使用 UI Bootstrap Typeahead 对数据库中的数据 select 进行自动完成搜索。
我的服务 returns 数据在我的响应中,但数据未在组件中列出。
当我在组件代码中下断点时,列表就在那里,当我继续调试时会显示列表,但如果不设置断点运行,则不会显示列表。
HTML
<input id="inputInstalation"
ng-model="profile.instalation"
typeahead-editable="false"
typeahead="installation as installation.name for installation in searchInstallation($viewValue)"
typeahead-input-formatter="formatLabel($model)"
ng-required="true">
控制器
$scope.searchInstallation = function(text){
return $http.get('/api/installations/name/' + text).then(function(response){
return response.data;
});
};
$scope.formatLabel = function(model){
return model ? model.name : "";
};
API NodeJS-数据库 Mongo
exports.findByName = function(req, res){
var connection = getConnection();
var Installation = getInstallationModel(connection);
Installation.find({name: new RegExp(req.params.name, "i")}, function (err, result) {
connection.close();
if(err) throw err;
res.json(result);
});
};
回应
[{ _id: 5525662b74100eb40f13ce00,
name: 'test 2',
description: 'Gdoc 02.02.00-00',
__v: 0,
services:
[ { name: 'Alfresco',
context: '/alfresco',
parameterURL: 'prmGdocServiceUrl',
_id: 5525662b74100eb40f13ce03 },
{ name: 'ri-rest',
context: '/iserver',
parameterURL: 'prmUrlIntegrationServer',
_id: 5525662b74100eb40f13ce02 },
{ name: 'ldap',
parameterURL: 'prmLdapUrl',
parameterUser: 'prmLdapPrincipal',
parameterPassword: 'prmLdapPassword',
_id: 5525662b74100eb40f13ce01 } ],
tables:
[ { _id: 5525662b74100eb40f13ce06, name: 'esegsistema' },
{ _id: 5525662b74100eb40f13ce05, name: 'esegusuario' },
{ _id: 5525662b74100eb40f13ce04, name: 'XPTO' } ],
parameters:
[ { name: 'prmUrlBaseServidorHTTP',
systemCode: '314',
_id: 5525662b74100eb40f13ce0e },
{ name: 'prmTamanhoMaximoArquivo',
systemCode: '314',
_id: 5525662b74100eb40f13ce0d },
{ name: 'prmGdocServiceUrl',
systemCode: '314',
_id: 5525662b74100eb40f13ce0c },
{ name: 'prmLdapUrl',
systemCode: '314',
_id: 5525662b74100eb40f13ce0b },
{ name: 'prmLdapPrincipal',
systemCode: '314',
_id: 5525662b74100eb40f13ce0a },
{ name: 'prmLdapPassword',
systemCode: '314',
_id: 5525662b74100eb40f13ce09 },
{ name: 'prmDomainSufix',
systemCode: '314',
_id: 5525662b74100eb40f13ce08 },
{ name: 'xxxxx',
systemCode: '314',
_id: 5525662b74100eb40f13ce07 } ] }]
我发现了问题,我正在使用 https://github.com/McNull/angular-block-ui 并且它与组件冲突。
解决方案:我从 angular blockui 创建了一个 requestFilter,以不阻止将组件发送到 API 的请求。