Wie übergeordnete Komponente mit HTML-select in Angular 1.5

Question

Ich habe eine Wurzelkomponente aufrufen, die Elemente zu einem Kind-Komponenten-Eingänge:

angular.module('demoApp', ['listing']) 
.component('smartComponent', { 
    templateUrl: 'smartComponent.template.html', 
    controller: function() { 
     var self = this; 

     self.items = [{ 
     id: 1, 
     text: 'item1' 
     }, { 
     id: 2, 
     text: 'item2' 
     }]; 

     self.selectItem = function(item) { 
     console.log('Selected item: ' + JSON.stringify(item)); 
     }; 

    } 
}) 

Es ist ein Weg für die untergeordnete Komponente, um die Elemente Bindung:

angular.module('listing', []) 
.component('listing', { 
    templateUrl: 'listing.template.html', 
    bindings: { 
    items: '<', 
    onSelect: '&' 
    } 

});

Ich kann problemlos mit Klicks umgehen, um ein Element mit ng-click auszuwählen. Aber ich bin mir nicht sicher, wie man ein select Drop-Down behandelt.

<div class="form-group"> 
<select id="test" class="form-control" ng-change="$ctrl.onSelect({item: item})" ng-model="$ctrl.itemId" ng-options="item.id as item.text for item in $ctrl.items track by item.id" required> 
    <option value="">---Please select---</option> 
</select> 

Hier ist ein Plunker mit einem Arbeits ng klicken und Nicht-Arbeits wählen: http://plnkr.co/edit/lQAhsqvsyjwCRhvkhSuS?p=preview

Wie bekomme ich mit select ein Element in der übergeordneten Komponente zu übergeben? Vielen Dank!

Answer 1

konnte ich die Ergebnisse erhalten Sie mit dem ng-click bekommen wurden durch die ng-options und ng-model Werte in listing.template.html von Ihrem zupfen ändern.

du hatte:

<select id="test" 
      class="form-control" 
      ng-change="$ctrl.onSelect({item: item})" 
      ng-model="$ctrl.itemId" 
      ng-options="item.id as item.text for item in $ctrl.items track by item.id" 
      required> 

ich es, indem sie diese Arbeit bekam:

<select id="test" 
      class="form-control" 
      ng-change="$ctrl.onSelect({item: $ctrl.item})" 
      ng-model="$ctrl.item" 
      ng-options="item.text for item in $ctrl.items" 
      required> 

item ist nicht wirklich ein Wert auf dem $ Umfang, wie es könnte nur verfügbar in den option Kindern. Wenn Sie jedoch denselben Wert für ng-model verwenden wie für den Parameter, den Sie an onSelect übergeben, steht Ihnen der ausgewählte Wert zur Verfügung. Ich weiß, dass ich eine Menge der Klauseln, die Sie in der ng-options verwendet haben, entfernt habe, aber hoffentlich bringt Sie das auf den richtigen Weg zurück.