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