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

Posted 2023-02-23

【中文标题】如何在 Angular 1.5 中使用 HTML 选择调用父组件

【英文标题】：How to invoke parent component with HTML select in Angular 1.5

【发布时间】：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 将项目传递给父组件？谢谢！

【参考方案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 中使用的子句，但希望这能让您重回正轨。