Question

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

但我不知道如何将这个值数组从特定视图传递给组件。所以，假设我有以下组件，其中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>

如何根据每个视图arrayType的具体情况，从要在控制器视图中呈现的组件绑定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？

1 个答案: