ngScreening - angular 筛选器

CompileYouth 发布于2019-08-20 10:19 / 1768人阅读

摘要：筛选器组件通过控制器定义数据，帮你完成数据的渲染监听过滤等功能。点击按钮会重置组件内的数据。包括单选组多选组的选中状态，原生的输入值，的按钮点击后，会执行这个函数当然，如果你不需要的回调，这样写就可以了。

ngScreening v0.4.9

angular筛选器组件
通过控制器定义数据，screening帮你完成数据的渲染、监听、过滤等功能。

DEMO

http://moerj.github.io/ngScre...

Getting Started

npm install ng-screening

require("angular");//在使用前，你需要引入 angular

require("ngScreening");//引入组件

angular.module("yourProject",["ngScreening"]);//注册组件

How to use

布局: 在html页面上定义好容器

数据操作: 传入数据，开启监听

callback 响应筛选数据变化

布局 ng-screening

筛选器的整体容器框



    ...





    ...

screening

定义一个筛选行

screening-checkbox

多选筛选器

screening-radio

单选筛选器

screening-div

自定义筛选容器

screening-flex

弹性容器布局，flex中的元素会均分screening行剩余部分

而当screening中只有flex布局时，screening的label参数会被禁用

justify-content

screening-flex指令可以接收的参数，设置flex的均分方式，具体参数同css-flex

当screening有混合布局时，默认justify-content:center

screening-toggle

这个指令写在组件外部的按钮上，用来定义一个外部toggle按钮

数据操作 data

传入数据，自动渲染，自动绑定

app.controller("yourCtrl",function ($scope) {
    $scope.yourData = [
        {
            name:"香蕉"
        },
        {
            name:"菠萝"
        },
        {
            name:"梨子"
        }
    ]
})

isChecked

defualt: undefined
设置数据，视图上会响应已选中的数据

app.controller("yourCtrl",function ($scope) {
    $scope.yourData = [
        {
            name:"香蕉",
            isChecked: true //视图上香蕉将会选中
        },
        {
            name:"菠萝"
        },
        {
            name:"梨子"
        }
    ]
})

isHidden

defualt: undefined
设置一个选择项隐藏

app.controller("yourCtrl",function ($scope) {
    $scope.yourData = [
        {
            name:"香蕉",
            isHidden: true //视图上香蕉将会隐藏
        },
        {
            name:"菠萝"
        },
        {
            name:"梨子"
        }
    ]
})

监听 screening-event

default: "change"
监听dom元素事件，事件触发时会执行callback

screening-watch

监听数据模型，模型改变时会执行callback

数据更新 callback

定义一个你的回调函数，它会在数据更新时通知你

...

app.controller("yourCtrl",function ($scope) {
    $scope.yourCallback = function () {
        // 每次数据更新会执行这个函数
    }
})

serarch

定义搜索回调函数，界面会生成一个搜索按钮

...

app.controller("yourCtrl",function ($scope) {
    $scope.yourSearch = function () {
        // 按钮点击后，会执行这个函数
    }
})

reset

定义重置回调函数，界面会生成一个重置按钮。
点击按钮会重置组件内的数据。包括：单选组、多选组的选中状态，原生dom的输入值，screening-watch的ngModel

...

app.controller("yourCtrl",function ($scope) {
    $scope.yourReset = function () {
        // 按钮点击后，会执行这个函数
    }
})

当然，如果你不需要 reset 的回调，这样写就可以了。

...

API - 服务 getChecked()

过滤掉未选择的数据，返回一个新数据

// 别忘了依赖注入 ngScreening
app.controller("yourCtrl",function ($scope, ngScreening) {
    // 初始数据
    $scope.yourData = [
        {
            name:"香蕉",
            isChecked: true
        },
        {
            name:"菠萝",
            isChecked: true
        },
        {
            name:"梨子"
        }
    ]
    // 每次数据更新会执行这个函数
    $scope.yourCallback = function () {
        // 将选中的数据筛选出来，返回一个新的数据
        var newData = ngScreening.getChecked($scope.yourData);
        console.log(newData);
    }
})

resize()

重置screening尺寸，自动显示或隐藏伸缩按钮

app.controller("yourCtrl",function ($scope, ngScreening) {
    // 重置页面上所有screening容器
    ngScreening.resize()

    // 重置指定的screening容器，参数为DOM对象
    ngScreening.resize(DOM)

})

toggle()

展开或收起整个组件

app.controller("yourCtrl",function ($scope, ngScreening) {
    // 控制页面上所有screening容器
    ngScreening.toggle()

    // 控制指定的screening容器，参数为DOM对象
    ngScreening.toggle(DOM)

})

OPTIONS 配置参数 label

设置筛选行标题

...

initrows

defualt: undefined
初始化显示的 screening screening-checkbox screening-radio 的行数



    ... 1 ...
    ... 2 ...
    ... 3 ...
    ... 被隐藏 ... 




    
    
        
    




    ...

multi-name

default: checkbox-全选, radio-单选
全选的控制按钮名称

width

screening-div设置宽度

important

让行常驻显示，不受外框隐藏控制

class - 公共样式

在 screening 行中的元素可以用的公共样式如下

size-lg 大尺寸

size-md 中尺寸

size-sm 小尺寸

Support

IE 9+

angular 1.x

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80093.html

表格组件 GridManager Angular 1.x

摘要：非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。前端鸡汤前端框架前端相关筛选选中项，字符串默认为。非必设项，选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager. s...

darcrand 2019-08-23 16:46 评论0 收藏0
SpreadJS 在 Angular2 中支持哪些事件？

摘要：在上一篇文章中，我们学习了在中支持绑定的属性，今天我们来介绍在中支持哪些事件。详细的事件说明，请参考博客。版本即将发布，更多更好的功能尽在新版本中，敬请期待登录官网，了解更多。 showImg(https://segmentfault.com/img/bVP1Wc?w=900&h=500);SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能...

姘搁『 2019-08-20 17:47 评论0 收藏0
Angular 2.x 从0到1 (四）史上最简单的Angular2教程

摘要：而且此时我们注意到其实没有任何一个地方目前还需引用了，这就是说我们可以安全地把从组件中的修饰符中删除了。第一节：Angular 2.0 从0到1 （一）第二节：Angular 2.0 从0到1 （二）第三节：Angular 2.0 从0到1 （三）作者：王芃 wpcfan@gmail.com 第四节：进化！模块化你的应用一个复杂组件的分拆上一节的末尾我偷懒的甩出了大量代码，可能...

sanyang 2019-08-20 14:39 评论0 收藏0
angular2高仿饿了么手机端app

摘要：项目地址邮箱求工作杭州项目介绍来公司实习，由于技术栈原因，学习一下，以此项目来做练习。项目暂时只能在开发环境运行。项目地址 https://github.com/Gitjinfeiy... 邮箱 1912144808@qq.com（求工作杭州）项目介绍来公司实习，由于技术栈原因，学习一下angular2，以此项目来做练习。项目暂时只能在开发环境运行。...

OldPanda 2019-08-22 11:03 评论0 收藏0
JSDuck 与 AngularJS 融合技巧

摘要：融合思路解决这个问题，有两种思路。给我们带来了以下新成员模块服务指令筛选器和控制器。与其他类是通过类的名称区分的，名称统一以结尾。这种处理方式是一种折中方案，如果想要更加规范优雅的话，建议使用自定义标签来解决。字数：1568 阅读时间：10分钟前言前面，我们以一个实战案例来详细说明了如何在实际开发中使用JSDuck工具。但是，并不是所有的时候，代码的封装方式都受我们控制的。...

CarterLi 2019-08-21 18:41 评论0 收藏0