2

私はuib-typeaheadをラップするディレクティブを持っています。問題は、uib-typeaheadにオブジェクトの異なる配列を入力したいということです。これは、配列内のオブジェクトのキーの異なる名前を意味します。

uib typeahead をラップする私のディレクティブ

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

そして、これが根性です

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'
}

});

ディレクティブの HTML

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

今これの代わりに

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

これ欲しい 

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

ディレクティブ リンクに式 ie を設定します。

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

助けてください、ありがとう。

4

1 に答える 1

1

こんな感じでした

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

ディレクティブ宣言では、スコープに「キー」を追加するだけです

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

ディレクティブが呼び出されると、次のようになります

<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>
于 2016-09-07T19:45:51.390 に答える