2013-02-25 6 views
8

il mio selezionare all'interno della mia vista angolare dove voglio aggiungere funzionalità scelto:Angular.js Scelto integrazione

<select ng-options="value for value in deutscheBankEvent.dates" ng-init="" ng-model="chosenA" class="chzn-select"> 
<option style="display:none" value="">Wählen Sie ein Datum</option> 
</select><br/> 

mio regolatore: quando ho iniettare qui la funzione .chosen, azzera le opzioni.

function Ctrl($scope,$http) { 

    $scope.text = ''; 
    $scope.user = {name: '', last: '', location: ''}; 
    $scope.value = 0; 
    $scope.sendForm = function(){ 
     $http.post('/Submit/To/Url', $scope.data).success(function(data) { 
      alert('done!'); 
     }); 
    }; 
} 

mio piè di pagina:

<g:javascript> 
$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
      jQuery(".adressen1_chzn-select").chosen();jQuery(".adressen0_chzn-select").chosen(); 
     }); 
</g:javascript> 

non ho idea, come ottenere il lavoro prescelto. all'interno del controller cancella le opzioni e non si applica, il resto non fa alcuna differenza. tutte le idee apprezzate

risposta

7

Si dovrebbe forse provare http://angular-ui.github.com/

Si tratta di una suite di direttive angolari. Tra questi troverai la direttiva "select2" che funge da proxy per il plug-in scelto (Select2 per la precisione).

+5

Select2 non è uguale a quello scelto. – thomaux

+2

@Anzeo Penso di averlo chiarito. – Stewie

+0

La seconda soluzione è più semplice, avrei dovuto scorrere verso il basso prima! – trueinViso

10

La soluzione non funzionerà perché il codice jQuery si attiva prima che l'elemento sia effettivamente creato nel DOM. Dovresti risolvere questo problema usando una direttiva sull'elemento del modulo.

L'elemento deve essere creato dinamicamente e pertanto si sta operando sull'elemento DOM, perfetto per le direttive di Angular. Non è necessario utilizzare jQuery e cercare di evitarlo mentre si lavora con Angular. Si noti che jQuery è ancora necessario a causa delle dipendenze Scelte.

mi risolve il problema con questo set:

  1. angolare scelto direttiva https://github.com/localytics/angular-chosen
  2. [FACOLTATIVO] Bootstrap3 styling https://github.com/alxlit/bootstrap-chosen

vi consiglio di provare a scrivere la direttiva da soli. È una bella pratica. Potete provare con questo: http://www.youtube.com/watch?v=8ozyXwLzFYs

Buona fortuna!

+1

Questa è LA soluzione. Funziona sullo stesso SELECT. D'altra parte, AngularUI UI-Select è molto difficile da implementare, è una semantica completamente diversa. –