Inizializzazione selezionare con AngularJS e ng-repeat

127

Sto provando a ottenere select-box per iniziare con un'opzione pre-riempita usando ng-repeat con AngularJS 1.1.5. Invece la selezione inizia sempre con nulla selezionato. Ha anche un'opzione vuota, che non voglio. Penso che ci sia un effetto collaterale sul fatto che nulla venga selezionato.Inizializzazione selezionare con AngularJS e ng-repeat

Posso farlo funzionare usando ng-options invece di ng-repeat, ma voglio usare ng-repeat per questo caso. Anche se il mio esempio ristretto non lo mostra, voglio anche impostare l'attributo title di ogni opzione, e non c'è modo di farlo usando ng-options, per quanto ne so.

Non penso che questo sia correlato al problema dell'ambito di applicazione/prototypical ereditarietà di AngularJs. Almeno non vedo nulla di ovvio quando ispeziono in Batarang. Inoltre, quando si seleziona un'opzione nella selezione con l'interfaccia utente, il modello viene aggiornato correttamente.

Ecco il codice HTML:

<body ng-app ng-controller="AppCtrl"> 
    <div> 
     Operator is: {{filterCondition.operator}} 
    </div> 
    <select ng-model="filterCondition.operator"> 
     <option 
      ng-repeat="operator in operators" 
      value="{{operator.value}}" 
     > 
      {{operator.displayName}} 
     </option> 
    </select> 
</body>

E il JavaScript:

function AppCtrl($scope) { 

    $scope.filterCondition={ 
     operator: 'eq' 
    } 

    $scope.operators = [ 
     {value: 'eq', displayName: 'equals'}, 
     {value: 'neq', displayName: 'not equal'} 
    ] 
}

JS Fiddle per questo: http://jsfiddle.net/coverbeck/FxM3B/2/

fonte

2013-09-05 Charles O.

ngOption è stato creato perché non c'era modo pulito di fare questo con ngRepeat. ngRepeat si srotola dopo che l'opzione è stata selezionata. Hai provato a impostare ngSelect sulle opzioni – TheSharpieOne

Sì! Il ngSelected ha funzionato! Pubblicherò un JsFiddle funzionante aggiornato. –

Va notato che in AngualrJS 1.2 questo codice funziona in modo diverso - Non crea un nuovo elemento vuoto

215

OK. Se non si desidera utilizzare il modo corretto ng-options, è possibile aggiungere l'attributo ng-selected con una logica di controllo delle condizioni per la direttiva option per eseguire la preselezione del lavoro.

<select ng-model="filterCondition.operator"> 
    <option ng-selected="{{operator.value == filterCondition.operator}}" 
      ng-repeat="operator in operators" 
      value="{{operator.value}}"> 
     {{operator.displayName}} 
    </option> 
</select>

Working Demo

fonte

2013-09-06 05:26:34 zsong

OK, sembra che tu abbia già risposto alla tua domanda in questo modo ... – zsong

+37

Ti darò il merito dato che l'hai capito da solo e hai fatto l'esempio completo. Anche se non sono d'accordo con il tuo commento su ng-options è il "modo corretto". :) Ho sempre usato ng-options da solo, ma questo ha richiesto di fare qualcosa che ng-options non supporta, per quanto piccolo.E il doc angolare dice che puoi anche usare ng-repeat. Grazie, Charles –

Grazie, è stato un modo semplice per avere alcune opzioni disabilitate. – Dorian

Come suggerito è necessario utilizzare NG-opzioni e purtroppo si crede è necessario fare riferimento all'elemento dell'array per un valore predefinito (a meno che l'array non sia una matrice di stringhe).

http://jsfiddle.net/FxM3B/3/

La JavaScript:

function AppCtrl($scope) { 


    $scope.operators = [ 
     {value: 'eq', displayName: 'equals'}, 
     {value: 'neq', displayName: 'not equal'} 
    ] 

    $scope.filterCondition={ 
     operator: $scope.operators[0] 
    } 
}

Il codice HTML:

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator.value}}</div> 
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators"> 
</select> 
</body>

fonte

2013-09-05 22:54:14 shaunhusain

Sai perché e sei sicuro? La documentazione (http://docs.angularjs.org/api/ng.directive:select) dice che è necessario utilizzare solo ng-options quando si associa a un valore non stringa. Come ho detto, voglio usare l'attributo title e non c'è modo di farlo con ng-options. Qualcosa come

Credo che la nota nei documenti sia un po 'poco chiara e in realtà significa che dovresti usare una stringa per il modello e avere una serie di stringhe per le opzioni. Se non ti dispiace quale sia il motivo per cui usi l'attributo "title" non lo vedo su W3C http://www.w3schools.com/tags/tag_option.asp e non riesco a ricordare di usarlo davvero. Non potresti semplicemente archiviare la descrizione negli oggetti, quindi recuperare ancora quei dati poiché è a questo che è ora associato il modello? – shaunhusain

Nella pagina W3C a cui ci si è collegati, se si fa clic sul collegamento Attributi globali, si vedrà che l'attributo titolo è supportato dall'elemento opzione. Sto usando l'attributo title solo per visualizzare il testo "tooltip", in modo che se passi il mouse sopra un'opzione, puoi ottenere una descrizione più ampia di cosa significhi l'opzione. È una cosa piccola, ma sarebbe bello avere, se possibile. –

Per il tag select, angolare fornisce la direttiva NG-opzioni. Ti fornisce la struttura specifica per impostare le opzioni e impostare un valore predefinito. Ecco il violino aggiornato utilizzando NG-opzioni che funziona come previsto: http://jsfiddle.net/FxM3B/4/

Aggiornato HTML (codice rimane lo stesso)

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator}}</div> 
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators"> 
</select> 
</body>

fonte

2013-09-05 22:57:18

Ciao Jeremy - Sto provando a farlo senza ng-opzioni. Come ho detto nella mia domanda e in risposta a Shaun, vorrei impostare l'attributo title su ogni opzione, e non posso farlo con ng-options, per quanto ne so. Grazie, Charles –

Grazie a TheSharpieOne per sottolineare l'opzione ng-selezionata. Se fosse stato pubblicato come risposta piuttosto che come commento, avrei fatto la risposta giusta.

Ecco un JSFiddle funzionante: http://jsfiddle.net/coverbeck/FxM3B/5/.

Ho anche aggiornato il violino per utilizzare l'attributo titolo, che avevo lasciato nel mio post originale, poiché non era la causa del problema (ma è il motivo per cui voglio usare ng-repeat invece di ng-options).

HTML:

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator}}</div> 
<select ng-model="filterCondition.operator"> 
    <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option> 
</select> 
</body>

JS:

function AppCtrl($scope) { 

    $scope.filterCondition={ 
     operator: 'eq' 
    } 

    $scope.operators = [ 
     {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'}, 
     {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'} 
    ] 
}

fonte

2013-09-05 23:56:16

Ci scusiamo per la pubblicazione come commento. Non avevo voglia di fare un esempio e non ero sicuro al 100% che avrebbe funzionato. Era solo una sensazione. – TheSharpieOne

Il fatto che angolare è iniettando un elemento opzione vuoto per la selezione è che l'oggetto modello binded ad esso per default viene con un valore vuoto quando inizializzato.

Se si desidera selezionare un opzione di default, allora si può probabilmente possibile impostare sulla portata del controller

$scope.filterCondition.operator = "your value here";

Se si desidera un segnaposto un'opzione vuoto, questo funziona per me

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators"> 
    <option value="">Choose Operator</option> 
</select>

fonte

2015-02-10 06:49:26 Ammadu

Questo è buono, ma Angolare crea un'opzione vuota. Come evitare questo? – MarceloBarbosa

Se si utilizza md-selezionare e ng-repeat ing md-opzione da materiale angolare quindi è possibile aggiungere ng-model-options="{trackBy: '$value.id'}" al tag cenere md-select mostrata in this pen

Codice:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}"> 
 
    <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label> 
 
    <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option> 
 
</md-select>

fonte

2016-07-28 14:49:26

Inizializzazione selezionare con AngularJS e ng-repeat

risposta

Problemi correlati