如何調用父組件的HTML選擇在角1.5

Question

我有一個輸入項子組件根組件：

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

    } 
}) 

有單向綁定到項目的子組件：

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

}）;

我可以輕鬆處理點擊以選擇具有ng-click的項目。但我不知道如何處理select下拉列表。

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

這裏是一個工作一個plunker NG單擊，非工作選擇：http://plnkr.co/edit/lQAhsqvsyjwCRhvkhSuS?p=preview

我如何將項目傳遞到母部件與select？謝謝！

Answer 1

我可以通過將listing.template.html中的ng-options和ng-model值從您的plunk中更改爲而獲得結果。

你有這樣的：

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

我得到了它，改成這個工作：

<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是不是在$範圍實際可用的值，因爲它可能只在option兒童可用。但是，如果您爲ng-model使用相同的值，那麼您將傳入的參數爲onSelect，則可以使用選定的值。我知道我刪除了很多您在ng-options中使用的條款，但希望這會讓您重新走上正軌。