ngScreening v0.4.9
angular筛选器组件
通过控制器定义数据，screening帮你完成数据的渲染、监听、过滤等功能。
DEMO
http://moerj.github.io/ngScre...
Getting Started
@H_403_11@npm install ng-screening @H_403_11@require('angular');//在使用前，你需要引入 angular require('ngScreening');//引入组件 angular.module('yourProject',['ngScreening']);//注册组件How to use
布局: 在html页面上定义好容器
数据操作: 传入数据，开启监听
callback 响应筛选数据变化
布局
ng-screening
筛选器的整体容器框
@H_403_11@<!-- 创建一个筛选器的外壳 --> <ng-screening> ... </ng-screening> <!-- 创建一个筛选器外壳 --> <!-- 这种方式可以解决：初始化页面时内部的真实dom暴露，导致页面结构跳动 --> <div class="ngScreening"> ... </div>screening
定义一个筛选行
@H_403_11@<ng-screening> <screening> <!-- 第一行 --> </screening> <screening> <!-- 第二行 --> </screening> </ng-screening>screening-checkBox
多选筛选器
@H_403_11@<screening> <!-- 生成checkBox类型的筛选器 --> <screening-checkBox data="yourData"></screening-checkBox> </screening>screening-radio
单选筛选器
@H_403_11@<screening> <!-- radio --> <screening-radio data="yourData"></screening-radio> </screening>screening-div
自定义筛选容器
@H_403_11@<screening> <screening-div label="自定义筛选:"> <input type="text" placeholder="查询数据"> </screening-div> </screening>screening-flex
弹性容器布局，flex中的元素会均分screening行剩余部分
而当screening中只有flex布局时，screening的label参数会被禁用
justify-content
screening-flex指令可以接收的参数，设置flex的均分方式，具体参数同css-flex
当screening有混合布局时，默认justify-content:center
@H_403_11@<screening> <screening-flex label="flex容器1"> <input type="text"> </screening-flex> <screening-flex label="flex容器2"> <input type="text"> </screening-flex> <screening-flex label="flex容器3"> <input type="text"> </screening-flex> </screening>screening-toggle
这个指令写在组件外部的按钮上，用来定义一个外部toggle按钮
@H_403_11@<button screening-toggle>外部控制按钮（收起/展开）</button>数据操作
data
@H_403_11@<screening-radio data="yourData"></screening-radio> @H_403_11@app.controller('yourCtrl',function ($scope) { $scope.yourData = [ { name:'香蕉' },{ name:'菠萝' },{ name:'梨子' } ] })isChecked
defualt: undefined
设置数据，视图上会响应已选中的数据
isHidden
defualt: undefined
设置一个选择项隐藏
监听
screening-event
default: 'change'
监听dom元素事件，事件触发时会执行callback
screening-watch
监听数据模型，模型改变时会执行callback
@H_403_11@<input type="text" ng-model="yourData"> <!-- screening-watch 可以在筛选器内任意位置 --> <screening-watch data="yourData"></screening-watch>数据更新
callback
@H_403_11@<!-- callback 只能定义在 ng-screening 上 --> <ng-screening callback="yourCallback()"> ... </ng-screening> @H_403_11@app.controller('yourCtrl',function ($scope) { $scope.yourCallback = function () { // 每次数据更新会执行这个函数 } })serarch
@H_403_11@<ng-screening search="yourSearch()" > ... </ng-screening> @H_403_11@app.controller('yourCtrl',function ($scope) { $scope.yourSearch = function () { // 按钮点击后，会执行这个函数 } })reset
定义重置回调函数，界面会生成一个重置按钮。
点击按钮会重置组件内的数据。包括：单选组、多选组的选中状态，原生dom的输入值，screening-watch的ngModel
当然，如果你不需要 reset 的回调，这样写就可以了。
@H_403_11@<ng-screening reset > ... </ng-screening>API - 服务
getChecked()
过滤掉未选择的数据，返回一个新数据
@H_403_11@// 别忘了依赖注入 ngScreening app.controller('yourCtrl',function ($scope,ngScreening) { // 初始数据 $scope.yourData = [ { name:'香蕉',isChecked: true },{ name:'菠萝',{ name:'梨子' } ] // 每次数据更新会执行这个函数 $scope.yourCallback = function () { // 将选中的数据筛选出来，返回一个新的数据 var newData = ngScreening.getChecked($scope.yourData); console.log(newData); } })resize()
@H_403_11@app.controller('yourCtrl',ngScreening) { // 重置页面上所有screening容器 ngScreening.resize() // 重置指定的screening容器，参数为DOM对象 ngScreening.resize(DOM) })toggle()
展开或收起整个组件
@H_403_11@app.controller('yourCtrl',ngScreening) { // 控制页面上所有screening容器 ngScreening.toggle() // 控制指定的screening容器，参数为DOM对象 ngScreening.toggle(DOM) })OPTIONS 配置参数
label
设置筛选行标题
@H_403_11@<screening label="标题:"> ... </screening>initrows
defualt: undefined
初始化显示的 screening screening-checkBox screening-radio 的行数
multi-name
default: checkBox-全选,radio-单选
全选的控制按钮名称
width
screening-div设置宽度
@H_403_11@<!-- 设置容器为500像素 --> <screening-div width="500px"></screening-div>important
让行常驻显示，不受外框隐藏控制
@H_403_11@<screening important> </screening>class - 公共样式
在 screening 行中的元素可以用的公共样式如下
size-lg 大尺寸
size-md 中尺寸
size-sm 小尺寸
Support
IE 9+
angular 1.x
