Question

我试图在自定义指令中使用click事件过滤列表，过滤器工作正常，但如何分配过滤后的项目以便反映在ng-repeat中？现在，在click事件发生后，在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创建子范围的原因，因为范围：false是默认值？为什么会这样？使用范围。$ parent.quesCompletedHeaders = filtered;解决问题

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

    });
  }

};
}
]);

Answer 2

有一个简单的替代方案而不是指令。

您可以点击元素并将控制器中的过滤器应用到列表中。

在HTML中，

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

在Controller中，

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

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

AngularJs使用自定义指令进行单击过滤

3 个答案: