使用angularjs uib-typeahead显示与ng-model不同的viewvalue

Question

我有一个uib-typeahead输入。

我需要使用异步调用来填充它。 我想将ng-model设置为“CODIGO”，但我需要显示viewvalue “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-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">

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

使用

的解决方案

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

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