AngularJs 使用自定义指令过滤点击答案

【问题标题】：AngularJs filtering on click using a custom directiveAngularJs 使用自定义指令过滤点击
【发布时间】：2015-07-24 18:54:33
【问题描述】：

我正在尝试使用自定义指令中的单击事件来过滤列表，过滤器工作正常，但我如何分配过滤后的项目以便它反映在 ng-repeat 中？现在，在单击事件发生后，在 quesCompletedHeaders 上使用 ng-repeat 生成的列表不会更改

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 正在创建一个不应该的子范围的原因，因为 scope:false 是默认值？为什么会这样？使用 scope.$parent.quesCompletedHeaders = 过滤；解决问题

【问题讨论】：

您能否展示一些使用该指令的 html 结构以及与 ng-repeat 的关系？

标签： angularjs angularjs-directive angularjs-filter

【解决方案1】：

将范围“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;
      });

    });
  }

};
}
]);

【讨论】：

【解决方案2】：

有一个简单的替代方法来代替指令。

您可以 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] 进行过滤

【解决方案3】：

好的，这是我的最终解决方案。

$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;
  };
});

【讨论】：