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

Question

我有一个 uib-typeahead 输入。

我需要使用异步调用来填充它。 我想将 ng-model 设置为“CODIGO”，但我需要显示视图值 “DESCRICAO”。 我的问题是，在我选择一个项目后，ng-model 是正确的，但 viewvalue 不是“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 - DESCICAO 映射并使用格式化程序

// 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">

您可以查看here 使用此解决方案的示例（异步结果部分）。

使用的解决方案

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

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