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

Question

我有 Angular 1.5 组件，它必须包含带有 ng-options 的 select 下拉菜单。这个 select 必须呈现到不同的控制器视图中，并且在每个视图中，不同的值数组将传递到组件中。

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

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>

并且在控制器的视图中我正在使用这样的组件：

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>

如何根据每个视图数组类型的具体情况绑定要在控制器视图中呈现的组件的 ng-options？

任何帮助将不胜感激。

Answer 1

您必须参考 $ctrl 或您在 controllerAs 选项中指定的任何内容才能访问控制器的绑定，在本例中为：$ctrl.arrayType。此外，为数组项提供一个更一致的名称。尝试这样的事情：

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

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

How to use ng-options inside Angular 1.5 component?

angularjs

angularjs-ng-options

angularjs-components