Έχω διαβάσει γι' αυτό σε άλλες αναρτήσεις, αλλά δεν μπόρεσα να το καταλάβω.
Έχω έναν πίνακα,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
Θέλω να τον εμφανίσω ως:
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
Και επίσης θέλω να επιλέξω την επιλογή με ID=000002.
Διάβασα select και προσπάθησα, αλλά δεν μπορώ να το καταλάβω.
Ένα πράγμα που πρέπει να σημειωθεί είναι ότι το ngModel είναι απαραίτητο για να λειτουργήσει το ngOptions... προσέξτε το ng-model="blah"
το οποίο λέει "set $scope.blah to the selected value".
Δοκιμάστε αυτό:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Εδώ'είναι περισσότερα από την τεκμηρίωση του AngularJS'(αν δεν την έχετε δει):
για πηγές δεδομένων με συστοιχίες:
- ετικέτα για την τιμή στον πίνακα
- select ως ετικέτα για τιμή σε πίνακα
- label group by group for value in array = select as label group by group for value in array
για πηγές δεδομένων αντικειμένων:
- label for (key , value) in object
- select as label for (key , value) in object
- label group by group for (key, value) in object
- select as label group by group for (key, value) in object
Για κάποιες διευκρινίσεις σχετικά με τις τιμές της ετικέτας επιλογής στο AngularJS:
Όταν χρησιμοποιείτε το ng-options
, οι τιμές των ετικετών επιλογών που γράφονται από το ng-options θα είναι πάντα ο δείκτης του στοιχείου του πίνακα με το οποίο σχετίζεται η ετικέτα επιλογής. Αυτό συμβαίνει επειδή το AngularJS σας επιτρέπει στην πραγματικότητα να επιλέγετε ολόκληρα αντικείμενα με στοιχεία ελέγχου επιλογής και όχι μόνο πρωτόγονους τύπους. Για παράδειγμα:
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>
Τα παραπάνω θα σας επιτρέψουν να επιλέξετε ένα ολόκληρο αντικείμενο στο $scope.selectedItem
απευθείας. Το θέμα είναι ότι, με το AngularJS, δεν χρειάζεται να ανησυχείτε για το τι βρίσκεται στην ετικέτα επιλογής σας. Αφήστε το AngularJS να το χειριστεί αυτό- εσείς θα πρέπει να ενδιαφέρεστε μόνο για το τι βρίσκεται στο μοντέλο σας στην εμβέλειά σας.
Εδώ είναι ένα plunker που επιδεικνύει την παραπάνω συμπεριφορά, και δείχνει την HTML γραμμένη
Αντιμετώπιση της προεπιλεγμένης επιλογής:
Υπάρχουν μερικά πράγματα που παρέλειψα να αναφέρω παραπάνω σχετικά με την προεπιλεγμένη επιλογή.
Επιλογή της πρώτης επιλογής και αφαίρεση της κενής επιλογής:
Μπορείτε να το κάνετε αυτό προσθέτοντας ένα απλό ng-init
που θέτει το μοντέλο (από το ng-model
) στο πρώτο στοιχείο των στοιχείων που επαναλαμβάνετε στο ng-options
:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Σημείωση: Αυτό θα μπορούσε να γίνει λίγο τρελό αν το foo
τύχει να αρχικοποιηθεί σωστά σε κάτι "falsy". Σε αυτή την περίπτωση, θα θέλετε να χειριστείτε την αρχικοποίηση του foo
στον ελεγκτή σας, πιθανότατα.
Προσαρμογή της προεπιλεγμένης επιλογής:
Αυτό είναι λίγο διαφορετικό- εδώ το μόνο που χρειάζεται να κάνετε είναι να προσθέσετε μια ετικέτα επιλογής ως παιδί της επιλογής σας, με ένα κενό χαρακτηριστικό value, και στη συνέχεια να προσαρμόσετε το εσωτερικό της κείμενο:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Σημείωση: Σε αυτή την περίπτωση η επιλογή "empty" θα παραμείνει εκεί ακόμα και αφού επιλέξετε μια διαφορετική επιλογή. Αυτό δεν ισχύει για την προεπιλεγμένη συμπεριφορά των επιλογών κάτω από το AngularJS.
Μια προσαρμοσμένη προεπιλεγμένη επιλογή που κρύβεται αφού γίνει μια επιλογή:
Αν θέλετε η προσαρμοσμένη προεπιλεγμένη επιλογή σας να εξαφανίζεται αφού επιλέξετε μια τιμή, μπορείτε να προσθέσετε ένα χαρακτηριστικό ng-hide στην προεπιλεγμένη επιλογή σας:
<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>
Μαθαίνω AngularJS και αγωνιζόμουν επίσης με την επιλογή. Ξέρω ότι αυτή η ερώτηση έχει ήδη απαντηθεί, αλλά ήθελα παρ' όλα αυτά να μοιραστώ λίγο περισσότερο κώδικα.
Στη δοκιμή μου έχω δύο listboxes: μάρκες αυτοκινήτων και μοντέλα αυτοκινήτων. Η λίστα με τα μοντέλα είναι απενεργοποιημένη μέχρι να επιλεγεί κάποια μάρκα. Εάν η επιλογή στο listbox μάρκες επαναφερθεί αργότερα (οριστεί σε 'Select Make') τότε το listbox μοντέλα γίνεται ξανά απενεργοποιημένο ΚΑΙ η επιλογή του επαναφέρεται επίσης (σε 'Select Model'). Οι μάρκες ανακτώνται ως πόρος, ενώ τα μοντέλα είναι απλά σκληρά κωδικοποιημένα.
[
{"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"};
}
Στο 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>