如何调用父组件的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中使用的条款，但希望这会让您重新走上正轨。