作者:陈翔_是学长 | 来源:互联网 | 2023-10-13 10:26
ngScreeningv0.4.9angular挑选器组件经由过程掌握器定义数据,screening帮你完成数据的衬着、监听、过滤等功用。DEMOhttp:moerj.github
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