Question

在更新过滤器后，我无法弄清楚如何更新角度列表。以下是我在html中的代码：

<li ng-repeat="items in list | filter:filterList" style="list-style-type:none">
     {{items}}
</li>

以下是我在控制器中更改filterList变量的onClick事件：

.controller('inputter',function ($scope){
    $scope.inputCount = 0;
    $scope.list = ['red robin', 'testerastic', 'fantastic', 'blue jay'];
    $scope.filterList = '';
    $scope.addtolist = function(){
        if($scope.addtoform!==''){
            $scope.list.push($scope.addtoform);
            $scope.addtoform = '';
            $scope.inputCount++;
        }
    };
    $('.link').on('click',function(){
        var filterButton = '';
        if($(this).hasClass('active')){
            $(this).removeClass('active');
            filterButton = '';
        }
        else{
            $('.nav > li').removeClass('active');
            $(this).toggleClass('active');
            filterButton =  $(this).text().split('Filter ').pop();
        }
        console.log(filterButton);
        if(filterButton!==''){
            $scope.filterList = filterButton;
        }
        else{
            $scope.filterList = '';
        }
        $scope.$live;
    });
  });

过滤器可以工作，但只有在我开始输入附加了ng-model-instant方法的输入框时才开始工作。我设置的两个测试按钮的值为“蓝色”和“红色”

Answer 1

因为jQuery操作发生在$ digest / $ apply循环之外，所以你需要手动$自己申请。像这样：

if(filterButton!==''){
    $scope.$apply(function() {
        $scope.filterList = filterButton;
    });     
}else{
    $scope.$apply(function() {
        $scope.filterList = '';
    });
}

这将强制angular更新数据绑定。此外，您还有另一个问题：当您提取过滤器的名称时，您会获得许多额外的空格，从而阻碍了您所需的功能。为了解决这个问题：

filterButton =  $(this).text().split('Filter ').pop().trim();

请注意，我已将.trim()添加到该行，这将删除额外的空格，您的过滤器将起作用。

工作人员：http://plnkr.co/edit/jDMCacspmUEnbVNOssV1

旁注：正如许多人在评论中所述，您通常希望避免在控制器中进行DOM操作。使用angular，您可以使用称为“指令”的东西，例如ng-click等。在这些函数中，有链接和编译函数，您可以在生命周期的不同点访问DOM元素。

将DOM操作代码放在适当的位置将确保角度在正确的时间更新所有内容。如果您坚持$apply方法适用于所有情况，您会发现有时您已经处于$apply周期内并且您将无法手动$apply那个时候。

我会研究如何在angular中修改DOM的指令和一般信息。我们的想法是尽可能少地操作DOM。在我们正在进行的大型软件项目中，我们并不需要手动执行任何DOM操作，因为ng-if，ng-class，ng-click等指令和一些自定义指令处理那对我们来说。一切都在角度的正常生命周期内。

单击更新角度列表过滤器

1 个答案: