Comment utiliser ng-options dans le composant Angular 1.5?

Question

J'ai un composant Angular 1.5 qui doit contenir une liste déroulante avec ng-options. Cette sélection doit être rendue dans différentes vues de contrôleur et dans chaque vue un tableau différent de valeurs serait passé dans le composant.

Mais je ne suis pas sûr comment passer ce tableau de valeurs d'une vue particulière au composant. Donc, disons que je le composant suivant, où arrayType serait la liaison à l'ensemble des valeurs et des options serait la liaison aux 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; 
    } 

})(); 

Et le code HTML du composant ressemble à ceci:

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> 

Et dans la vue du contrôleur que je utilise le composant comme ceci:

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> 

Comment puis-je lier les ng-options à partir du composant à rendu dans la vue du contrôleur en fonction de la spécifique pour chaque vue arrayType?

Toute aide serait grandement appréciée.

Answer 1

Vous devez vous référer à $ctrl ou tout ce que vous avez spécifié dans l'option controllerAs afin d'accéder aux liaisons du contrôleur, dans ce cas: $ctrl.arrayType. En outre, donnez un nom plus cohérent à l'élément de tableau. Essayez quelque chose comme ceci:

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