基于复选框选择的AngularJS过滤器

Posted

技术标签:

【中文标题】基于复选框选择的AngularJS过滤器【英文标题】:AngularJS filter based on checkbox selection 【发布时间】:2019-02-17 09:52:32 【问题描述】:

我创建了一个函数,该函数应该根据复选框选择过滤显示的数据。但是,我无法显示正确的数据。复选框正常工作,但我无法将选定的复选框值推送到数据中并获取输出。

我需要选中复选框以显示包含该 H 值的数据。

所以基本上有 4 个复选框与您在上面的屏幕截图中看到的类型字段相关联。假设我选择 H。我只需要显示 type = H 的数据。我将在下面附上我目前所拥有的一些代码。我似乎无法让它工作。

var filterOtb = function (keepOpen, types) 
var filtered = data;
var checkedTypes = [];

console.log('filtered = ', filtered);

scope.types.forEach(function(code) 
 if (code.selected) 
  checkedTypes.push(code.type);
  console.log('selected checkbox', checkedTypes);
 
);

if (scope.validDates.from) 
 filtered = filterOtbByDateRange();


if (modal && !keepOpen) 
 modal.hide();

return filtered;

其中运行了一个单独的函数,可按日期过滤屏幕截图中显示的键。请忽略该功能...感谢您的帮助,因为我已经坚持了几天...

【问题讨论】:

***.com/questions/51896655/… 参考这个问题 【参考方案1】:

下划线很简单,你可以为一个或多个属性传递过滤器值。

let listOfPlays = 
    [
    title: "The Rambo", author: "Shakespeare", year: 1520,
    title: "Cymbeline", author: "Shakespeare", year: 1611,
    title: "The Tempest", author: "Shakespeare", year: 1611,
    title: "The Dog", author: "Shakespeare", year: 1900
    ]


_.where(listOfPlays, author: "Shakespeare", year: 1611);
=> [title: "Cymbeline", author: "Shakespeare", year: 1611,
    title: "The Tempest", author: "Shakespeare", year: 1611]

【讨论】:

我对 AngularJS 还很陌生,所以我不太确定如何用我的代码来实现它... 只需将其包含在 index.html 中,或者您可以在本地下载文件而不包含它。 underscore<script src="https://underscorejs.org/underscore-min.js"></script> 我已经在使用那个库了我只是不知道你的回答如何回答我的问题......【参考方案2】:

检查此代码以获取过滤器数组;

 var data = [ id: '1', type: 'H' ,  id: '2', type: 'H' ,  id: '3', type: 'M' ,  id: '4', type: 'G' ,  id: '5', type: 'J' ,  id: '6', type: 'G' ];
    var types = ['H', 'G'];  

    var filter = function (data, types) 
        return data.filter(item => types.includes(item.type));
    
    console.log(filter(data, types));
    

    var data = [
         id: '1', type: 'H' ,
         id: '2', type: 'H' ,
         id: '3', type: 'M' ,
         id: '4', type: 'G' ,
         id: '5', type: 'J' ,
         id: '6', type: 'G' 
    ];

    var types = [
         type: 'H', selected: true ,
         type: 'M', selected: true ,
         type: 'G', selected: false ,
         type: 'J', selected: false ];

    var filterOtb = function (types) 
        var filtered = data;
        var checkedTypes = [];
        console.log('filtered = ', filtered);
        types.forEach(function (code) 
            if (code.selected) 
                checkedTypes.push(code.type);
                console.log('selected checkbox', checkedTypes);
            
        );
        return data.filter(item => checkedTypes.includes(item.type));
        
      
    
    console.log(filterOtb(types));

【讨论】:

你能根据我的代码 sn-p 写这个吗...所以我知道这个代码属于哪里...?谢谢 我换个方法

以上是关于基于复选框选择的AngularJS过滤器的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS - 带有数字/长度的过滤复选框

使用带有 AngularJS 的复选框过滤数组

AngularJS判断checkbox/复选框是否选中并实时显示

AngularJS判断checkbox/复选框是否选中并实时显示

使用jQuery更新复选框时,AngularJS不会刷新

我应该如何使用angularjs取消选择html页面中已经选择的复选框?