Jeg har lest om det i andre innlegg, men jeg kunne ikke finne ut av det.
Jeg har en matrise,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
Jeg vil gjengi det som:
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
Og jeg vil også velge alternativet med ID=000002.
Jeg har lest select og prøvd, men jeg finner ikke ut av det.
En ting å merke seg er at ngModel er påkrevd for at ngOptions skal fungere ... legg merke til ng-model="blah"
som sier "sett $scope.blah til den valgte verdien".
Prøv dette:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Her er mer fra dokumentasjonen til AngularJS (hvis du ikke har sett den):
for array-datakilder:
- etikett for verdi i array
- velg som etikett for verdi i array
- etikett gruppe for gruppe for verdi i array = velg som etikett gruppe for gruppe for verdi i matrise
for objektdatakilder:
- etikett for (nøkkel , verdi) i objektet
- velg som etikett for (nøkkel , verdi) i objektet
- etikett gruppe for gruppe for (nøkkel, verdi) i objektet
- velg som etikett gruppe for gruppe for (nøkkel, verdi) i objektet
For noen avklaringer om alternativer for tagverdier i AngularJS:
Når du bruker ng-options
, verdiene av alternativkoder skrevet ut av ng-options vil alltid være indeksen til array-elementet alternativkoden er relatert til . Dette er fordi AngularJS faktisk lar deg velge hele objekter med valgkontroller, og ikke bare primitive typer. For eksempel:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
Ovennevnte vil tillate deg å velge et helt objekt i $scope.selectedItem
direkte. Poenget er at med AngularJS trenger du ikke å bekymre deg for hva som er i alternativtaggen din. La AngularJS håndtere det; du bør bare bry deg om hva som er i modellen din i ditt omfang..
Her er en plunker som demonstrerer oppførselen ovenfor, og viser HTML skrevet ut
Håndtering av standardalternativet:
Det er et par ting jeg har unnlatt å nevne ovenfor knyttet til standardalternativet.
Valg av det første alternativet og fjerning av det tomme alternativet:
Du kan gjøre dette ved å legge til en enkel ng-init
som setter modellen (fra ng-model
) til det første elementet i elementene du gjentar i ng-options
:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Merk: Dette kan bli litt sprøtt hvis foo
tilfeldigvis blir initialisert riktig til noe "falskt". I så fall vil du sannsynligvis håndtere initialiseringen av foo
i kontrolleren din.
Tilpasse standardalternativet:.
Dette er litt annerledes; her er alt du trenger å gjøre å legge til en alternativ tag som et barn av ditt valg, med en tom verdi attributt, og deretter tilpasse sin indre tekst:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Merk: I dette tilfellet vil det "tomme" alternativet forbli der selv etter at du har valgt et annet alternativ. Dette er ikke tilfelle for standardoppførselen til valg under AngularJS.
Et tilpasset standardalternativ som skjuler seg etter at et valg er gjort:
Hvis du vil at det tilpassede standardalternativet ditt skal forsvinne etter at du har valgt en verdi, kan du legge til et ng-hide-attributt til standardalternativet ditt:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>
Jeg lærer AngularJS og slet også med valg. Jeg vet at dette spørsmålet allerede er besvart, men jeg ønsket å dele litt mer kode likevel.
I testen min har jeg to listebokser: bilmerker og bilmodeller. Listen over modeller er deaktivert til noen merker er valgt. Hvis valget i merkevarelisten senere tilbakestilles (satt til "Velg merke"), blir modellelisten deaktivert igjen OG valget tilbakestilles også (til "Velg modell"). Fabrikater hentes som en ressurs mens modeller bare er hardkodet.
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}
I CoffeeScript:
#directive
app.directive('select2', ->
templateUrl: 'partials/select.html'
restrict: 'E'
transclude: 1
replace: 1
scope:
options: '='
model: '='
link: (scope, el, atr)->
el.bind 'change', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat='o in options'
value='{{$index}}' ng-bind='o'></option>
</select>
<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>
<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>