Arbeiten mit Select unter Verwendung der ng-options von AngularJS

Question

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

Ich habe ein Array,

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

Ich möchte es so wiedergeben:

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

Außerdem möchte ich die Option mit der ID=000002 auswählen.

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

Answer 1

Wenn Sie für jede Option einen eigenen Titel benötigen, ng-options ist nicht anwendbar. Verwenden Sie stattdessen ng-repeat mit 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>

Answer 2

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>

Sie füllen zum Beispiel das Quellmodell der Optionsliste aus einem REST-Dienst. Ein ausgewählter Wert war vor dem Füllen der Liste bekannt und wurde festgelegt. Nach dem Ausführen der REST-Anforderung mit $http ist die Liste Option fertig.

Aber die gewählte Option ist nicht eingestellt. Aus unbekannten Gründen AngularJS im Schatten $digest Ausführung nicht binden ausgewählt, wie es sein sollte. Ich muss jQuery verwenden, um die ausgewählte zu setzen. Es ist wichtig! AngularJS, in shadow, fügt das Präfix zum Wert des attr "value" für generiert von ng-repeat Optionen. Für int ist es "Zahl:".

$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);
           }
       });
}