AngularJs: come far funzionare ui-select correttamente?

Question

LA SITUAZIONE:

Sto facendo un app angolare dove devo usare ui-select: nella pagina di informazioni utente, nel selezionare devono essere possibile scegliere uno o molti tag. È quasi funzionante, tranne per il fatto che ho problemi ad ottenere e visualizzare i tag preesistenti.

IL CODICE:

Vista:

<ui-select multiple ng-model="info_data.tags" theme="bootstrap" ng-disabled="disabled"> 

    <ui-select-match placeholder="Select tag...">{{$item.name}} </ui-select-match> 

    <ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}"> 

    {{tag.name}} 

    </ui-select-choices> 

</ui-select> 

<p>Selected: {{info_data.tags}}</p> 

Controller:

$http({ 

    url: base_url + 'main/db_get_all_tags', 
    method: "POST", 

}).success(function (data) { 

    $scope.all_tags = data; 

}); 

$scope.show_info = function() { 

    var result_info = DbService.get_info($stateParams.db_data_id); 

    result_info.then(function(data) 
    { 
     $scope.info_data = data; 

    }); 

}; 

TENTATIVO 1:

Accade un comportamento molto strano. Non vedo i tag nella pagina delle informazioni dell'utente, e nemmeno nella selezione ui. Tranne se si aggiorna 5/6 volte, poi improvvisamente funzionerà magicamente, visualizzando i tag nella pagina delle informazioni utente e nella selezione ui. In entrambi i casi, di lavoro e non, ricevo molte messaggio di errore dello stesso tipo:

Impossibile leggere proprietà 'lunghezza' di indefinito.

TENTATIVO 2:

Per risolvere questo problema, ho aggiunto questo codice nel controller:

$scope.info_data = { tags: [] }; 
$scope. all_tags = []; 

E non ho ricevuto più alcun messaggio di errore. L'app è stabile e posso vedere i tag appropriati nella pagina delle informazioni dell'utente. L'unico problema è che i tag non vengono più caricati nella selezione ui.

Se seleziono un nuovo tag, funziona correttamente, ma perdo i tag preesistenti.

Question (s):

Come posso fare ui-select che funziona correttamente? (attualmente v0.8.3) C'è un problema di conflitto?

Come posso chiamare correttamente i dati preesistenti dal server?

Grazie mille!

Answer 1

Non sei stato particolarmente descrittivo con gli errori che stai vedendo quindi non so se quanto segue ti aiuterà ..

Ho avuto un problema in origine quando si utilizza il codice demo ui-select come esempio perché si sta utilizzando il propsFilter filtro che è un filtro personalizzato che hanno scritto per la demo:

<ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}"> 

I presumo che tu non stia includendo questo filtro nel tuo codice che potrebbe essere un motivo per cui stai riscontrando un problema. È possibile risolverlo utilizzando del normale angolare filtro:

<ui-select-choices repeat="tag in all_tags | filter: {name: $select.search}"> 

In alternativa, se si dispone di più oggetti da filtrare è possibile scrivere il filtro propsFilter per filtrare su O piuttosto che E. Se si utilizza 'filtro' per filtrare più proprietà, cercherà di far corrispondere il valore di ricerca a tutte le proprietà.

app.filter('propsFilter', function() { 
    return function(items, props) { 
      var out = []; 
       if (angular.isArray(items)) { 
        items.forEach(function(item) { 
         var itemMatches = false; 

         var keys = Object.keys(props); 
         for (var i = 0; i < keys.length; i++) { 
           var prop = keys[i]; 
           var text = props[prop].toLowerCase(); 
           if (item[prop].toString().toLowerCase().indexOf(text) !== -1) { 
            itemMatches = true; 
            break; 
            } 
          } 

          if (itemMatches) { 
           out.push(item); 
          } 
         }); 
       } else { 
        // Let the output be the input untouched 
         out = items; 
       } 

       return out; 
      }; 
    }); 

è possibile vedere il commit con il filtro in esso qui: https://github.com/angular-ui/ui-select/commit/3fac88cfad0ad2369c567142eadba52bdb7998b1

Anche se si dispone di alcuni requisiti di filtraggio specifiche ti consiglierei di scrivere il proprio filtro per garantire prestazioni ottimali.

Answer 2

Non so quale sia la situazione era come prima Select2 # 4.0, ma in realtà non è così difficile da usare senza angular-ui-select (ed è una minore dipendenza)

sufficiente includere select2 nelle vostre dipendenze Bower e utilizzarlo nella funzione link all'interno della direttiva:

.directive('someDirective', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      element.find('.your-select2').select2({ 
       theme: 'classic', 
       placeholder: 'Select a placeholder...', 
       allowClear: true, 
       data: [{ id: 'New', text: 'New'}]... 
      }); 
     }, 
    }; 
}) 

e il codice HTML:

<select class="your-select2" ng-model="a.model.field"></select> 

è puoi anche caricare il data dal controller tramite un servizio, se vuoi, quindi usa semplicemente lo scope per impostarlo!

Dico questo mentre ho provato ad utilizzare angular-ui-select perché pensavo "hey è Angular, devi usare un plugin per questo!", Ma non è sempre così :). Inoltre ho trovato i documenti non così utili (chiamami pigro ma hey)