it-swarm.com.de

Arbeiten mit select mit den ng-Optionen von AngularJS

Ich habe darüber in anderen Posts gelesen, aber ich konnte es nicht herausfinden.

Ich habe eine Reihe,

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

Ich möchte es rendern als:

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

Und ich möchte auch die Option mit der ID = 000002 auswählen.

Ich habe auswählen gelesen und versucht, aber ich kann es nicht herausfinden.

432
Andrej Kaurin

Zu beachten ist, dass ngModel erforderlich ist , damit ngOptions funktioniert. Beachten Sie den ng-model="blah", der besagt, dass $ scope.blah auf den ausgewählten Wert gesetzt wird.

Versuche dies:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

Weitere Informationen finden Sie in der Dokumentation von AngularJS (falls Sie diese noch nicht gesehen haben):

für Array-Datenquellen:

  • bezeichnung für Wert im Array
  • wählen Sie als Bezeichnung für den Wert im Array
  • label Gruppe für Gruppe für Wert in Array = Wählen Sie als Label Gruppe für Gruppe für Wert in Array

für Objektdatenquellen:

  • bezeichnung für (Schlüssel, Wert) im Objekt
  • wählen Sie als Bezeichnung für (Schlüssel, Wert) im Objekt
  • beschriften Sie Gruppe für Gruppe für (Schlüssel, Wert) in Objekt
  • wählen Sie als Bezeichnung Gruppe für Gruppe für (Schlüssel, Wert) im Objekt

Zur Verdeutlichung der Options-Tag-Werte in AngularJS:

Bei Verwendung von ng-options sind die von ng-options ausgegebenen Werte der Options-Tags immer der Index des Array-Elements, auf das sich das Options-Tag bezieht . Dies liegt daran, dass Sie mit AngularJS tatsächlich ganze Objekte mit Auswahlsteuerelementen auswählen können und nicht nur primitive Typen. Zum Beispiel:

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>

Mit dem obigen Befehl können Sie ein gesamtes Objekt direkt in $scope.selectedItem auswählen. Der Punkt ist, dass Sie sich mit AngularJS keine Gedanken darüber machen müssen, was in Ihrem Optionstag enthalten ist. Lassen Sie AngularJS damit umgehen; Sie sollten sich nur darum kümmern, was in Ihrem Modell in Ihrem Bereich enthalten ist.

Hier ist ein Plunker, der das obige Verhalten demonstriert und den ausgeschriebenen HTML-Code zeigt


Umgang mit der Standardoption:

Es gibt ein paar Dinge, die ich oben in Bezug auf die Standardoption nicht erwähnt habe.

Auswählen der ersten Option und Entfernen der leeren Option:

Sie können dies tun, indem Sie einen einfachen ng-init hinzufügen, der das Modell (von ng-model) auf das erste Element in den Elementen setzt, die Sie in ng-options wiederholen:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

Hinweis: Dies kann ein wenig verrückt werden, wenn foo mit etwas "Falschem" richtig initialisiert wird. In diesem Fall möchten Sie höchstwahrscheinlich die Initialisierung von foo in Ihrem Controller durchführen.

Anpassen der Standardoption:

Das ist ein bisschen anders; Hier müssen Sie lediglich ein Options-Tag als untergeordnetes Element Ihrer Wahl mit einem leeren Wertattribut hinzufügen und dann den inneren Text anpassen:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

Hinweis: In diesem Fall bleibt die Option "leer" erhalten, auch nachdem Sie eine andere Option ausgewählt haben. Dies ist nicht der Fall für das Standardverhalten von Selects unter AngularJS.

Eine benutzerdefinierte Standardoption, die ausgeblendet wird, nachdem eine Auswahl getroffen wurde:

Wenn Sie möchten, dass Ihre benutzerdefinierte Standardoption nach Auswahl eines Werts nicht mehr angezeigt wird, können Sie Ihrer Standardoption ein ng-hide-Attribut hinzufügen:

<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>
790
Ben Lesh

Ich lerne AngularJS und hatte auch Probleme mit der Auswahl. Ich weiß, dass diese Frage bereits beantwortet ist, aber ich wollte trotzdem etwas mehr Code teilen.

In meinem Test habe ich zwei Listenfelder: Automarken und Automodelle. Die Modellliste ist deaktiviert, bis eine Marke ausgewählt wird. Wenn die Auswahl in der Make-Listbox später zurückgesetzt wird (auf 'Select Make' gesetzt), wird die Model-Listbox wieder deaktiviert und ihre Auswahl wird ebenfalls zurückgesetzt (auf 'Select Model'). Makes werden als Ressource abgerufen, während Modelle nur fest codiert sind.

Macht JSON:

[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]

services.js:

angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
    return $resource('makes.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

HTML-Datei:

<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>

controller.js:

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"};
}
89
mp31415

Aus irgendeinem Grund lässt AngularJS zu, dass ich verwirrt werde. Ihre Dokumentation ist in dieser Hinsicht ziemlich schrecklich. Weitere gute Variationsbeispiele wären willkommen.

Wie auch immer, ich habe eine leichte Variation der Antwort von Ben Lesh.

Meine Datensammlungen sehen folgendermaßen aus:

items =
[
   { key:"AD",value:"Andorra" }
,  { key:"AI",value:"Anguilla" }
,  { key:"AO",value:"Angola" }
 ...etc..
]

Jetzt

<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>

der Optionswert war immer noch der Index (0, 1, 2 usw.).

Hinzufügen von Track By korrigierte es für mich:

<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>

Ich gehe davon aus, dass es öfter vorkommt, dass Sie einer Auswahlliste ein Array von Objekten hinzufügen möchten, also werde ich mich an dieses erinnern!

Beachten Sie, dass Sie ab AngularJS 1.4 keine ng-Optionen mehr verwenden können, sondern ng-repeat für Ihr Optionstag verwenden müssen:

<select name="test">
   <option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>
38
Mattijs

Die Frage ist bereits beantwortet (übrigens, wirklich gute und umfassende Antwort von Ben), aber ich möchte der Vollständigkeit halber noch ein weiteres Element hinzufügen, was auch sehr praktisch sein kann.

In dem von Ben vorgeschlagenen Beispiel:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

das folgende ngOptions Formular wurde verwendet: select as label for value in array.

Label ist ein Ausdruck, dessen Ergebnis das Label für das <option> -Element ist. In diesem Fall können Sie bestimmte Zeichenfolgen verketten, um komplexere Optionsbezeichnungen zu erhalten.

Beispiele:

  • ng-options="item.ID as item.Title + ' - ' + item.ID for item in items" gibt Ihnen Labels wie Title - ID
  • ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items" gibt Ihnen Bezeichnungen wie Title (X), wobei X die Länge der Titelzeichenfolge ist.

Sie können auch Filter verwenden, z.

  • ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items" gibt Ihnen Beschriftungen wie Title (TITLE), wobei der Titelwert von Title-Eigenschaft und TITLE der gleiche Wert ist, aber in Großbuchstaben umgewandelt wird.
  • ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items" gibt Ihnen Bezeichnungen wie Title (27 Sep 2015), wenn Ihr Modell eine Eigenschaft SomeDate hat
15
Tom

In 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>
7
Akatsuki Sai

Wenn Sie für jede Option einen benutzerdefinierten Titel benötigen, gilt ng-options nicht. Verwenden Sie stattdessen ng-repeat mit den folgenden Optionen:

<select ng-model="myVariable">
  <option ng-repeat="item in items"
          value="{{item.ID}}"
          title="Custom title: {{item.Title}} [{{item.ID}}]">
       {{item.Title}}
  </option>
</select>
6
Dmitri Algazin

Ich hoffe, dass das folgende für Sie arbeiten wird.

<select class="form-control"
        ng-model="selectedOption"
        ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>
3
Meghshyam Sonar

Das kann nützlich sein. Bindungen funktionieren nicht immer.

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products"></select>

Beispielsweise füllen Sie das Optionslisten-Quellmodell von einem REST -Dienst aus. Ein ausgewählter Wert war vor dem Ausfüllen der Liste bekannt und wurde festgelegt. Nach der Ausführung der Anforderung REST mit $ http ist die Listenoption abgeschlossen.

Die ausgewählte Option ist jedoch nicht festgelegt. Aus unbekannten Gründen wird AngularJS bei der Ausführung von shadow $ digest nicht wie gewünscht gebunden. Ich muss jQuery verwenden, um die Auswahl zu treffen. Es ist wichtig! AngularJS fügt im Schatten das Präfix zum Wert von attr "value" für die von ng-repeat generierten Optionen hinzu. Für int ist es "number:".

$scope.issue.productId = productId;
function activate() {
    $http.get('/product/list')
       .then(function (response) {
           $scope.products = response.data;

           if (productId) {
               console.log("" + $("#product option").length);//for clarity
               $timeout(function () {
                   console.log("" + $("#product option").length);//for clarity
                   $('#product').val('number:'+productId);

               }, 200);
           }
       });
}
1
trueboroda