2

Ich habe eine Direktive, die uib-typeahead umhüllt, die Sache ist, dass ich die uib-typeahead mit verschiedenen Arrays von Objekten bevölkern will, die verschiedene Namen für die Schlüssel der Objekte innerhalb der Arrays I bedeutet haben diesegesetzt uib-typeahead Attribut Dynamisch

Meine Richtlinie, die uib

typeahead wickelt
<input-text-material-typeahead input-model="rendimiento.operador" label-model="textType" holder="Destino" color="#5E35B1" lista="Operadores" label="Destino"></input-text-material-typeahead> 

Und dies sind die Eingeweide

ng.app.directive('inputTextMaterialTypeahead', function() { 
return{ 
    restrict:'EA', 
    scope:{ 
     holder:'@', 
     color:'@', 
     lista:'@', 
     item:'@', 
     inputModel:'=', 
     method:'@' 
    }, 
    controller:function($scope, $listas, $element){ 
     $scope.getItem = function(val){ 
      return $listas[$scope.lista](val, function(response){ 
       return response.map(function(item) { 
        return item; 
       }); 
      }); 
     } 

     $scope.onSelect = function($item, $model, $label){ 
      // 
      $scope.inputModel = $item; 
     } 
    }, 
    link:function(scope, element, attrs, color){ 
     // 
     var input_text  = element.find('#input-text'); 
     var label_rendimiento = element.find('#label-rendimiento'); 

     input_text.on('focus', function(){ 
      label_rendimiento.addClass('show'); 
      label_rendimiento.css({'color':scope.color}); 
      element.find('.input-rendimiento').css({'border-bottom':'solid 3px '+scope.color+''}); 
      input_text.attr('placeholder', ''); 
     }); 

     input_text.on('blur', function(){ 
      if(!input_text.val()){ 
       label_rendimiento.removeClass('show'); 
       input_text.attr('placeholder', scope.holder); 
       element.find('.input-rendimiento').css({'border-bottom': 'solid 1px #BDBDBD'});  
      } 
      else{ 
       label_rendimiento.css({'color':'#BDBDBD'}); 
       element.find('.input-rendimiento').css({'border-bottom': 'solid 1px #BDBDBD'});  
      } 
     }); 
    }, 
    templateUrl:ng.components + '/input-typeahead-material.html' 
} 

});

der HTML-Code der Richtlinie

<div class="col-xs-12 nopad"> 
    <label class="label-rendimiento" id="label-rendimiento">{{holder}}</label> 
</div> 
<div class="col-xs-12 nopad input-rendimiento"> 
    <input ng-model="whatever" placeholder="Unidad" id="input-text" uib-typeahead="Clave as Clave.Nombre for Clave in getItem($viewValue)" typeahead-loading="loadingLocations" ng-model-options="{debounce:800}" typeahead-on-select="onSelect($item, $model, $label)"/> 

    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i> 
</div> 

Jetzt Statt dieser

uib-typeahead="Clave as Clave.Nombre for Clave in getItem($viewValue)" 

Ich möchte diese

uib-typeahead="{{expression}} in getItem($viewValue)" 

und in der Richtlinie Verbindung der Ausdruck gesetzt dh

scope.expression = 'Clave as Clave.Nombre for Clave'; 

Bitte helfen Sie, danke.

Antwort

1

Es war wie dieser

uib-typeahead="Label as Label[key] for Label in getItem($viewValue)" 

und in der directivedeclaration ich nur hinzufügen, 'Schlüssel' auf den Umfang

scope:{ 
    holder:'@', 
    color:'@', 
    lista:'@', 
    item:'@', 
    inputModel:'=', 
    key:'@' 
}, 

und wenn die Richtlinie genannt wird, ist wie folgt

<input-text-material-typeahead key="Operador" input-model="rendimiento.operador" label-model="textType" holder="Destino" color="#5E35B1" lista="Operadores" label="Destino"></input-text-material-typeahead> 
Verwandte Themen