2017-01-16 40 views
0

我剛創建了一個自動完成Kendo輸入字段內的div必須由ng-if控制,因爲它必須僅顯示給特定類別的用戶。 但我終於在我的瀏覽器上呈現了一個沒有自動完成屬性的普通輸入字段。 如果我刪除了ng-if指令,或者即使將它轉換爲ng-show,它也能正常工作。角ng如果與Kendo UI自動完成問題

這是我的HTML:

<div ng-if="utenteProfilo=='PB'"> 
    <label for="PB" class="col-sm-2 control-label">PB</label> 
    <div class="col-sm-4"> 
    <input ng-model="codPB" class="cento" id="codPB" /> 
    <input type="hidden" id="cognomePb" name="cognomePb" /> 
    <input type="hidden" id="nomePb" name="nomePb" /> 
    </div> 
</div> 

這是我的JS:

$("#codPB").kendoAutoComplete({ 
    placeholder: "Scegliere un PB...", 
    dataTextField: 'PBanker', 
    filter: "contains", 
    autoBind: false, 
    minLength: 3, 
    headerTemplate: '<div class="dropdown-header k-widget k-header">' + 
     '<span>Cognome</span>' + 
     '<span>Nome</span>' + 
     '</div>', 
    template: '<span class="k-state-default" ></span>' + 
     '<span class="k-state-default"><h6 data-recordCognomePB="#= cognome #" data-recordNomePB="#= nome #">#: data.cognome # &nbsp; #: data.nome #</h6></span>', 
    select: function(e) { 
       var cognomePb = e.item.find('h6').attr('data-recordCognomePB'); 
       var nomePb = e.item.find('h6').attr('data-recordNomePB'); 
      $('#cognomePb').val(cognomePb); 
      $('#nomePb').val(nomePb); 
     }, 
    filtering: function(e) { 
       $('#cognomePb').val(''); 
       $('#nomePb').val(''); 
      }, 
    dataSource: { 
     schema: { 
      parse: function(response) { 
       var length = response.length; 
       var dataItem; 
       var idx = 0; 

       for (; idx < length; idx++) { 
       dataItem = response[idx]; 
       dataItem.PBanker = dataItem.cognome + " " + dataItem.nome; 
       } 

       return response; 
      } 
     }, 
    serverFiltering: true, 
     transport: { 
      read: { 
       url: "http://myFile.json", 
       data: function(){ 
        return {pb: $('#codPB').val()} 
        } 
      } 
      }, 
    }, 
}); 

你知道這種行爲的任何問題?我做錯了什麼?

+0

什麼**是**的問題? – Mistalis

回答

0

嘗試避免在使用角度時查詢DOM(使用$("#codPB").kendoAutoComplete())。你正在混合兩種不同的方法。

在這種情況下,劍道提供指示具有角工作,見this demo

HTML

<input kendo-auto-complete ng-model="country" 
     k-data-source="countryNames" style="width: 100%;" /> 

JS

angular.module("KendoDemos", [ "kendo.directives" ]) 
     .controller("MyCtrl", function($scope){ 
      $scope.countryNames = [ 
      "Albania", 
      "Andorra", 
      //[...] 
      "Ukraine", 
      "United Kingdom", 
      "Vatican City" 
       ]; 
     }); 

另一種解決方案(以下優雅)是使用ng-show而不是ng-if