angularjs - 如何在 Angular 1.5 组件中使用 ng-options？

Question

我有 Angular 1.5 组件，它必须包含带有 ng-options 的选择下拉列表。此选择必须呈现到不同 Controller 的 View 中，并且在每个 View 中，不同的值数组将传递到组件中。

但是我不确定如何将这个值数组从特定 View 传递到组件。因此，假设我有以下组件，其中 arrayType 将是对值数组的绑定(bind)，而选项将是对 ng-options 的绑定(bind):

app.test.component.js

(function() {
angular
    .module('Testcomponent')
    .component('testSelector', {
        controller: TestSelector,
        templateUrl: 'test-selector.html',
        bindings: {
            model: '=',
            form: '<',
            name:'@',
            arrayType: '<',
            options: '='
        }
    });
  function TestSelector() {
    var vm = this;
  }

})();

组件的 html 如下所示:

app.test.component.html

<div>
    <select class="select-form" 
      name="{{vm.name}}"
      arrayType="{{vm.arrayType}}"
      ng-model="vm.model" 
      ng-options="arrayType.value as arrayType.name for arrayType in 
      arrayType">
    </select>
</div>

在 Controller 的 View 中，我正在使用这样的组件:

app.test.controller.js

   <test-selector
        model="vm.something"
        form="vm.TestForm" 
        name="Test Name"
        array-type="vm.specificForTheControllerArray"
        options="What options should I use here?">
    </test-selector>

如何根据每个 View arrayType 的具体情况绑定(bind)要在 Controller View 中呈现的组件的 ng-options？

任何帮助将不胜感激。

Answer 1

您必须引用 $ctrl 或您在 controllerAs 选项中指定的任何内容才能访问 Controller 的绑定(bind)，在这种情况下:$ ctrl.arrayType.此外，为数组项提供一个更一致的名称。尝试这样的事情:

<select ...
    ng-options="type.value as type.name for type in $ctrl.arrayType">