AngularJS Select Boxes
AngularJS laat jou toe om aftreklyste te skep gebaseer op items in 'n skikking, of 'n voorwerp.
Die skep van 'n kieskassie met behulp van ng-opsies
As jy 'n aftreklys wil skep, gebaseer op 'n voorwerp of 'n skikking in AngularJS, moet jy die ng-optionsopdrag gebruik:
Voorbeeld
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.names = ["Emil", "Tobias",
"Linus"];
});
</script>
van-opsies vs van-herhaal
U kan ook die ng-repeatopdrag gebruik om dieselfde aftreklys te maak:
Voorbeeld
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Omdat die ng-repeatopdrag 'n blok HTML-kode vir elke item in 'n skikking herhaal, kan dit gebruik word om opsies in 'n aftreklys te skep, maar die ng-optionsopdrag is spesiaal gemaak om 'n aftreklys met opsies te vul.
Wat gebruik ek?
Jy kan beide die ng-repeatrichtlijn en die ng-optionsrichtlijn gebruik:
Gestel jy het 'n reeks voorwerpe:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Voorbeeld
Gebruik ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Wanneer die waarde as 'n voorwerp gebruik word, gebruik ng-valuein plaas van value:
Voorbeeld
Gebruik ng-repeatas 'n voorwerp:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
Voorbeeld
Gebruik ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
Wanneer die geselekteerde waarde 'n voorwerp is, kan dit meer inligting bevat, en jou toepassing kan meer buigsaam wees.
Ons sal die ng-optionsopdrag in hierdie handleiding gebruik.
Die databron as 'n objek
In die vorige voorbeelde was die databron 'n skikking, maar ons kan ook 'n voorwerp gebruik.
Gestel jy het 'n voorwerp met sleutel-waarde-pare:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
Die uitdrukking in die ng-optionskenmerk is 'n bietjie anders vir voorwerpe:
Voorbeeld
Deur 'n objek as die databron te gebruik, xverteenwoordig die sleutel en
y
verteenwoordig die waarde:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
Die geselekteerde waarde sal altyd die waarde in 'n sleutel -waarde- paar wees.
Die waarde in 'n sleutel -waarde- paar kan ook 'n objek wees:
Voorbeeld
Die geselekteerde waarde sal steeds die waarde in 'n sleutel -waarde- paar wees, maar hierdie keer is dit 'n voorwerp:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Die opsies in die aftreklys hoef nie die sleutel in 'n sleutel -waarde-paar te wees nie, dit kan ook die waarde of 'n eienskap van die waarde-objek wees:
Voorbeeld
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>