ngScreeningangular挑选器

angular挑选器组件
经由过程掌握器定义数据，screening帮你完成数据的衬着、监听、过滤等功用。

DEMO

http://moerj.github.io/ngScre&＃8230;

Getting Started

npm install ng-screening


require('angular');//在运用前，你须要引入 angular
require('ngScreening');//引入组件
angular.module('yourProject',['ngScreening']);//注册组件


How to use

1. 规划: 在html页面上定义好容器

2. 数据操纵: 传入数据，开启监听

3. 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: &＃8216;change&＃8217;
监听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 &＃8211; 效劳

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 &＃8211; 大众款式

在 screening 行中的元素能够用的大众款式以下

• size-lg 大尺寸

• size-md 中尺寸

• size-sm 小尺寸

Support

• IE 9+

• angular 1.x