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：http://plnkr.co/edit/lQAhsqvsyjwCRhvkhSuS?p=preview

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

Answer 1

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

你有这个：

  <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中使用的很多条款，但希望这会让你回到正轨。

如何在Angular 1.5

1 个答案: