如何在 Angular 1.5 中使用 HTML 选择调用父组件答案

【问题标题】：How to invoke parent component with HTML select in Angular 1.5如何在 Angular 1.5 中使用 HTML 选择调用父组件
【发布时间】：2016-10-23 15:50:30
【问题描述】：

我有一个向子组件输入项目的根组件：

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>

这是一个可以工作的 ng-click 和不工作的选择：http://plnkr.co/edit/lQAhsqvsyjwCRhvkhSuS?p=preview

如何使用select 将项目传递给父组件？谢谢！

【问题讨论】：

标签： angularjs

【解决方案1】：

通过从您的 plunk 中更改 listing.template.html 中的 ng-options 和 ng-model 值，我能够获得您使用 ng-click 获得的结果。

你有这个：

  <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 实际上不是 $scope 上可用的值，因为它只能在 option 子级中可用。但是，如果您对ng-model 使用与传递给onSelect 的参数相同的值，则所选值将对您可用。我知道我删除了很多您在 ng-options 中使用的子句，但希望这能让您重回正轨。

【讨论】：