Pergunta

Eu estou tentando criar um AngularJS Directiva para gerenciar o promps de um <select> entrada.Os 3 modos diferentes, são como segue:

  1. Não permita que uma opção em branco
    • Este é o comportamento padrão
  2. Permitir uma opção em branco, sem texto
    • Conseguido através da criação allow-blank="true" sobre a directiva
  3. Permitir uma opção em branco com comandos de texto
    • Conseguido através da criação allow-blank para qualquer valor diferente de "true"

No entanto, em branco opções nunca estão disponíveis.

Demonstração no Plunker

Modelo

<select ng-options="tag.id as tag.name for tag in myTags">
  <option ng-if="allowBlank === 'true'" value=""></option>
  <option ng-if="allowBlank && allowBlank !== 'true'" value="">{{allowBlank}}</option>
</select>

Directiva

myApp.directive('mySelector', ['$http', function($http) {
  return {
    templateUrl:'my-selector-template.html',
    restrict: 'E',
    scope: {
      allowBlank: '@?'
    },
    replace: true,
    controller: function ($scope) {
      $scope.myTags = [
        {"name":"aliquam in","id":1},
        {"name":"massa velit","id":2},
        {"name":"nec vestibulum","id":3}
      ];
    }
  };
}]);
Foi útil?

Solução

O problema é que o conteúdo do select é transcluída (veja abaixo).Se você inspecionar os elementos que estão de saída você não ver a opção de etiquetas definidas dentro.

Como você está apenas usando uma seqüência de caracteres, você deve usar um pré-função de ligação que você adicionar a opção correta em via javascript.O código a seguir deve fazer o truque (Parágrafos Plunk).

link: {
  pre: function(scope, element, attrs){
    if(attrs.allowBlank === 'true') element.append('<option value=""></option>');
    else if(attrs.allowBlank && attrs.allowBlank !== '') element.append('<option value="">' + attrs.allowBlank + '</option>');
  }
}

EDITAR A escolha não 'transclude' é o conteúdo, como @lightswitch05 apontou a escolha directiva agarra o primeiro filho com o value="" como o nó vazio (fonte bibliográfica).Em seguida, mais tarde, ele limpa o conteúdo da escolha e adiciona dinamicamente no respectivo <option> tagsfonte bibliográfica)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top