AngularJs фильтрация по клику с использованием пользовательской директивы

Question

AngularJs фильтрация по клику с использованием пользовательской директивы

0

Я пытаюсь отфильтровать список с использованием события click в пользовательской директиве, фильтр работает нормально, но как мне назначить отфильтрованные элементы, чтобы он отражался в ng-repeat? В настоящий момент список, сгенерированный с помощью ng-repeat на quesCompletedHeaders, не изменяется после того, как произошло событие click

app.directive('sectionSelector', ['$filter', 'questionnaireSections',
  function ($filter, questionnaireSections) {
    return {
      restrict: 'A',
      link: function (scope, iElement, iAttrs) {
        iElement.on('click', function () {
          scope.$apply(function () {

            // filters correct question range 
            var filtered = $filter('rangeFilter')(scope.quesCompletedHeaders, [5, 10], true);
            console.log(filtered); //=> This is correct how to put back on scope?

            // There is an ng-repeat on quesCompletedHeaders in the template
            // but nothing changes even when assigning filted results back
            // on scope
            scope.quesCompletedHeaders = filtered;

            // works with $parent not sure why a child scope is 
            // created with the directive
            scope.$parent.quesCompletedHeaders = filtered
          });

        });
      }

    };
  }
]);

Хорошо, я выяснил причину sectionSelector создает дочернюю область, которая не должна быть с области видимости: false является значением по умолчанию? почему это происходит? используя scope. $ parent.quesCompletedHeaders = filter; решает проблему

ericsicons 24 июль 2015, в 21:13

Источник

0

Можете ли вы показать некоторую html-структуру, где используется эта директива, и отношение к ng-repeat?
charlietfl 24 июль 2015, в 19:20

Теги:

angularjs

angularjs-filter

angularjs-directive

3 ответа

Ещё вопросы

Можете ли вы показать некоторую html-структуру, где используется эта директива, и отношение к ng-repeat?

ericsicons · Answer 1 · 2015-07-24T19-05-00.000Z

Итак, вот мое окончательное решение.

$scope.rangeFilter = function (range) {
  $scope.quesRangeStart = range[0];
  $scope.quesRangeEnd = range[1];
}

В шаблоне я прокладываю фильтр

ng-repeat="question in quesCompletedHeaders|rangeFilter:[quesRangeStart, quesRangeEnd]"

и на кнопках фильтра

ng-repeat="section in questionnaireSections" 
ng-click="rangeFilter(section.range)"

и код фильтра

app.filter('rangeFilter', function () {
  return function (items, rangeInfo) {

    var min = parseInt(rangeInfo[0]);
    var max = parseInt(rangeInfo[1]);
    var filtered = items.filter(function (header) {
      return header.rang >= min && header.rang <= max;
    });

    return filtered;
  };
});

Subhashini · Answer 2 · 2015-07-24T17-38-00.000Z

Добавить область "quesCompletedHeaders" в директиву

HTML

<hello-world sectionSelector="filtered.quesCompletedHeaders"></hello-world>

Javascript

app.controller('MainCtrl', function($scope) {
$scope.filtered.quesCompletedHeaders = {};
});


app.directive('sectionSelector', ['$filter', 'questionnaireSections',
function ($filter, questionnaireSections) {
return {
  restrict: 'EA',
  scope: {
            questionnaireSections: "=",
        },
  link: function (scope, iElement, iAttrs) {
    iElement.on('click', function () {
      scope.$apply(function () {

        // filters correct question range 
        var filtered = $filter('rangeFilter')(scope.quesCompletedHeaders, [5, 10], true);
        console.log(filtered); 
        scope.filtered.quesCompletedHeaders = filtered;
      });

    });
  }

};
}
]);

raj · Answer 3 · 2015-07-24T17-11-00.000Z

Вместо директивы есть простая альтернатива.

вы можете нажать ng-click на элемент и применить фильтр в контроллере к списку.

В HTML,

<input type="button" value="select section" ng-click="filterquestionaire(5,10)"/>

в контроллере,

$scope.filterquestionaire = function(start,end) {
       var filtered = $filter('rangeFilter')(scope.quesCompletedHeaders, [start, end], true);
       $scope.quesCompletedHeaders = filtered;
};

Есть проблема с этим подходом, $ scope.quesCompletedHeaders теперь уменьшен, поэтому я не смогу фильтровать по словам [11,15] впоследствии