使用 angularjs uib-typeahead 来显示与 ng-model 不同的视图值

Question

我有一个uib-typeahead输入。

我需要使用异步调用来填充它。我想将ng-model设置为"CODIGO"，但我需要显示视图值"德斯里考"。我的问题是，在我选择一个项目后，ng-model 是正确的，但视图值不是"DESCRICAO"。它也是"CODIGO"。

getCBOEspecialidadesByDesc是一个异步服务，返回：

[{CODIGO:1, DESCRICAO:'TESTE1'},
{CODIGO:2, DESCRICAO:'TESTE2'},
{CODIGO:3, DESCRICAO:'TESTE3'}
....
]

//控制器

$scope.getAllProfissoes=function(val){
    return dataService.getCBOEspecialidadesByDesc(val).then((response)=> {
         return response.data.results
      }, (erro)=> {
        console.log(erro)
      }
  )}

//标记

    <input name="usuarioProfissional.prof" type="text" ng-model="profissional.COD_CBO_3" 
    uib-typeahead="item.CODIGO as item.DESCRICAO for item in getAllProfissoes($viewValue)" 
    typeahead-editable="false" 
    class="form-control">

Mysql 表：

    CREATE TABLE STAFF (
    ID                       BIGINT AUTO_INCREMENT  NOT NULL
    , ATIVO                  BOOLEAN   NOT NULL
    , NOME                   VARCHAR( 100 ) NOT NULL
    , COD_CBO_3              VARCHAR( 10 )
    , CONSTRAINT PK_STAFF_NH
        PRIMARY KEY ( ID )
    )ENGINE=INNODB;

   //used to fill COD_CBO_3  in staff table 
   CREATE TABLE CBO_ESPECIALIDADES (
    ID                          BIGINT AUTO_INCREMENT  NOT NULL
    , CODIGO                    VARCHAR( 10 )
    , DESCRICAO                 VARCHAR( 255 )
    , CONSTRAINT PK_ESPEC_NH
        PRIMARY KEY ( ID )
    )ENGINE=INNODB;

角度服务

angular.module("clinang").service('dataService', ['$http','config', function ($http,config) {
   var urlBase = config.baseUrl;
    this.getCBOEspecialidadesByDesc = function (sel) {
                return $http.get(urlBase+'/cbo_especialidades/ByDesc/'+sel);
            };
}]);

服务器路由器

'use strict';
const express = require('express');
const router = express.Router();
const callback=function(err,data,res){
     console.log(data)
     if (err) return res.status(500).json(err);
     return res.status(200).send(data);
}
//used by getCBOEspecialidadesByDesc angular service
router.get('/ByDesc/:id',function(req,res,next){    
    const searchString=req.params.id||'';
    var params = ['%'+searchString+'%'];
    console.log(params);
    req.getConnection(function (err, connection) {
            var ret
            connection.query('select * from CBO_ESPECIALIDADES where descricao like ?',params, function (error, results, fields) {
              if (error){
                 ret={success:false, results:error}
              }
              else {
               ret={success:true, results:results}
              }
              callback(error,ret,res)
            });
    }); 
});

Answer 1

这是 uib-typeahead 的工作方式。

您可以使用两个技巧来执行您想要的操作。

1） 将整个对象另存为模型

//标记

<input name="usuarioProfissional.prof" type="text" ng-model="profissional.COD_CBO_3" 
    uib-typeahead="item as item.DESCRICAO for item in getAllProfissoes($viewValue)" 
    typeahead-editable="false" 
    class="form-control">

profissional.COD_CBO_3将包含整个对象。 {CODIGO:1, DESCRICAO:'TESTE1'}在操作它时必须考虑到它。

2）保留CODIGO - DESCRICAO映射并使用格式化程序

//.JS

$scope.formatter = function(model) {
  return $scope.mappings.get(model);
}
$scope.mappings = new Map();
$scope.getAllProfissoes=function(val){
  return dataService.getCBOEspecialidadesByDesc(val).then((response)=> {
       response.data.results.forEach((result) => {$scope.mappings.set(result.CODIGO, result.DESCRICAO);})
       return response.data.results
    }, (erro)=> {
      console.log(erro)
    }
)}

//标记

<input name="usuarioProfissional.prof" type="text" ng-model="profissional.COD_CBO_3" typeahead-input-formatter="formatter($model)"
    uib-typeahead="item.CODIGO as item.DESCRICAO for item in getAllProfissoes($viewValue)" 
    typeahead-editable="false" 
    class="form-control">

可以在此处查看此解决方案的示例（异步结果部分）。

使用的解决方案

解决方案取决于您的用例。如果您需要在某处重新填充字段（按示例编辑表单），您应该考虑第一个。

如果您不需要重新填充它，则可以使用第二个。