ngScreening - angular 筛选器
ngScreening v0.4.9angular筛选器组件 DEMOhttp://moerj.github.io/ngScre... Getting Startednpm install ng-screening require('angular');//在使用前,你需要引入 angular require('ngScreening');//引入组件 angular.module('yourProject',['ngScreening']);//注册组件 How to use
布局ng-screening筛选器的整体容器框 <!-- 创建一个筛选器的外壳 --> <ng-screening> ... </ng-screening> <!-- 创建一个筛选器外壳 --> <!-- 这种方式可以解决:初始化页面时内部的真实dom暴露,导致页面结构跳动 --> <div class="ngScreening"> ... </div> screening定义一个筛选行 <ng-screening> <screening> <!-- 第一行 --> </screening> <screening> <!-- 第二行 --> </screening> </ng-screening> screening-checkbox多选筛选器 <screening> <!-- 生成checkbox类型的筛选器 --> <screening-checkbox data="yourData"></screening-checkbox> </screening> screening-radio单选筛选器 <screening> <!-- radio --> <screening-radio data="yourData"></screening-radio> </screening> screening-div自定义筛选容器 <screening> <screening-div label="自定义筛选:"> <input type="text" placeholder="查询数据"> </screening-div> </screening> screening-flex弹性容器布局,flex中的元素会均分screening行剩余部分 而当screening中只有flex布局时,screening的label参数会被禁用 justify-contentscreening-flex指令可以接收的参数,设置flex的均分方式,具体参数同css-flex 当screening有混合布局时,默认justify-content:center <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按钮 <button screening-toggle>外部控制按钮(收起/展开)</button> 数据操作data传入数据,自动渲染,自动绑定 <screening-radio data="yourData"></screening-radio> app.controller('yourCtrl',function ($scope) { $scope.yourData = [ { name:'香蕉' },{ name:'菠萝' },{ name:'梨子' } ] }) isCheckeddefualt: undefined app.controller('yourCtrl',function ($scope) { $scope.yourData = [ { name:'香蕉',isChecked: true //视图上香蕉将会选中 },{ name:'梨子' } ] }) isHiddendefualt: undefined app.controller('yourCtrl',isHidden: true //视图上香蕉将会隐藏 },{ name:'梨子' } ] }) 监听screening-eventdefault: 'change' <!-- 定义一个搜索功能 --> <screening-div label="搜索:"> <!-- 监听监听输入框change事件 --> <input screening-event type="text" ></input> <!-- 监听监听按钮click事件 --> <button screening-event="click" type="button" >搜索</button> </screening-div> screening-watch监听数据模型,模型改变时会执行callback <input type="text" ng-model="yourData"> <!-- screening-watch 可以在筛选器内任意位置 --> <screening-watch data="yourData"></screening-watch> 数据更新callback定义一个你的回调函数,它会在数据更新时通知你 <!-- callback 只能定义在 ng-screening 上 --> <ng-screening callback="yourCallback()"> ... </ng-screening> app.controller('yourCtrl',function ($scope) { $scope.yourCallback = function () { // 每次数据更新会执行这个函数 } }) serarch定义搜索回调函数,界面会生成一个搜索按钮 <ng-screening search="yourSearch()" > ... </ng-screening> app.controller('yourCtrl',function ($scope) { $scope.yourSearch = function () { // 按钮点击后,会执行这个函数 } }) reset定义重置回调函数,界面会生成一个重置按钮。 <ng-screening reset="yourReset()" > ... </ng-screening> app.controller('yourCtrl',function ($scope) { $scope.yourReset = function () { // 按钮点击后,会执行这个函数 } }) 当然,如果你不需要 reset 的回调,这样写就可以了。 <ng-screening reset > ... </ng-screening> API - 服务getChecked()过滤掉未选择的数据,返回一个新数据 // 别忘了依赖注入 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()重置screening尺寸,自动显示或隐藏伸缩按钮 app.controller('yourCtrl',ngScreening) { // 重置页面上所有screening容器 ngScreening.resize() // 重置指定的screening容器,参数为DOM对象 ngScreening.resize(DOM) }) toggle()展开或收起整个组件 app.controller('yourCtrl',ngScreening) { // 控制页面上所有screening容器 ngScreening.toggle() // 控制指定的screening容器,参数为DOM对象 ngScreening.toggle(DOM) }) OPTIONS 配置参数label设置筛选行标题 <screening label="标题:"> ... </screening> initrowsdefualt: undefined <!-- 默认显示3行筛选器,其余的会收起隐藏 --> <ng-screening initrows="3"> ... 1 ... ... 2 ... ... 3 ... ... 被隐藏 ... </ng-screening> <!-- 固定初始化行数,隐藏组件伸缩按钮 --> <ng-screening> <!-- checkbox组默认全部显示,没有伸缩按钮 --> <screening> <screening-checkbox data="yourData" ></screening-checkbox> </screening> </ng-screening> <!-- initrows == 最大行数,初始显示所有行,伸缩按钮显示 --> <ng-screening initrows="100"> ... </ng-screening> <ng-screening> <screening initrows="2"> <!-- 子行中用这种方式可以防止多余部分隐藏,超出指定数值的行数--> </screening> </ng-screening> multi-namedefault: checkbox-全选,radio-单选 <!-- 控制按钮点击后可以全部选中或反选 --> <screening-checkbox multi-name="全选"></screening-checkbox> <!-- 单选的只有样式没有实际功能 --> <screening-radio multi-name="单选"></screening-radio> widthscreening-div设置宽度 <!-- 设置容器为500像素 --> <screening-div width="500px"></screening-div> important让行常驻显示,不受外框隐藏控制 <screening important> </screening> class - 公共样式在 screening 行中的元素可以用的公共样式如下
Support
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- angular.js 4第一步之搭建环境
- AngularJS使用angular.bootstrap完成模块手动加载
- bash – 打印与命令行匹配字符串的列名
- angularjs – Angular $parent和$parent.$parent
- angularjs – 如何在登录后跟踪用户ID和Google A
- Angular 2 CSV文件下载
- rpm -yum error“无法检索存储库:epel的metalin
- Vim:如何通过`#!`设置无扩展文件的filetype?
- angularjs – 在Ionic Framework上创建离子选项卡
- Scala:Tail Recursion和ListBuffer