Typeahead de AngularUI/Bootstrap

Introducción

Dado el siguiente Esquema: Table.Xyz REFERENCED Table2.id, se define el campo Table.Xyz como “typeahead”.

Template
< input type="text" ng-model="fields.xyz_selected" placeholder="Buscar" uib-typeahead="opt as opt.label for opt in typeaheadOptions($viewValue)" typeahead-wait-ms="300" class="form-control">
< span ng-show="selectTypeahead()" class="glyphicon glyphicon-ok">< /span>
Variables del $scope
$scope.fields = {
  xyz, //id
  xyz_, //Objeto
  xyz_selected, //Si se inicializa de la base de datos, sera un string, caso contrario sera todo el objeto
  xyz_search //Busqueda relizada, este field es necesario para determinar si fue inicializado o no de la base de datos
}
Método $scope.typeaheadOptions
 //Definir opciones para el buscador
  $scope.typeaheadOptions = function(search){
    if(search.length < 4) return "";
    
    return DataDefinition.rowsExtLabel({entity:$scope.component.entity, search:{simple:search}}).then(
      function(response){ return response.rows; },
      function(error){ return $scope.processError(error); }
    );
  };
Método $scope.selectTypeahead
  //Seleccionar typeahead
  $scope.selectTypeahead = function(){
    if(($scope.fields["xyz_selected"]) && (typeof $scope.fields["xyz_selected"] === "object")){
      $scope.fields["xyz"] = $scope.fields["xyz_selected"]["id"];
      return true;
    }

    //si esta definido el "xyz" y no esta definido "xyz_search" signfica que el dato fue inicializado directamente de la base de datos
    else if(($scope.fields["xyz"]) && (!$scope.fields["xyz_search"])){
      return true;
    }

    $scope.fields["xyz"] = null;
    return false; 
  };

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *