2

HTML select 要素を順序付けられていないリストにバインドするカスタム ディレクティブを作成しています。

静的選択要素でうまく機能します。

ただし、動的選択では機能しませんでした。私のディレクティブが ng-options または ng-repeat ディレクティブによって生成されたオプションを取得する方法はありますか?

ここに例があります:http://jsfiddle.net/fjbyq/3/

angular.module('myApp', [])
.directive('taskFilterChoices', function() {
  return {
      transclude: true,
      replace: true,
      template: '<div class="listToggleBox listType" data-ng-transclude><ul class="choicefilterList"><li data-ng-repeat="option in options"> <a href="" class="taskFilterLink" data-value="{{ option.value }}">{{ option.text }}</a> </li> </ul> </div>',
      scope: {},
      link: function(scope, element, attrs) {
        var _select = element.find('select'),
          _selectOptions = [];

        _select.hide();
        _select.find('option').each(function(i, option) {
          var _optionObj = {
            value: option.value,
            text: option.innerText
          };
          _selectOptions.push(_optionObj);
        });
        scope.options = _selectOptions;
      }
  };
})

.directive('taskFilterLink', function() {
  return {
      restrict: 'C',
      link: function(scope, element) {
        $(element).on('click', function(e){
            e.preventDefault();
            var _select = $(this).closest('.listToggleBox').find('select');
            _select.val($(this).data('value')).triggerHandler('change');
        });
      }
  };
});

ありがとう

4

0 に答える 0