热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ngScreeningangular挑选器

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

  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: ‘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


推荐阅读
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • This guide provides a comprehensive step-by-step approach to successfully installing the MongoDB PHP driver on XAMPP for macOS, ensuring a smooth and efficient setup process. ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文基于刘洪波老师的《英文词根词缀精讲》,深入探讨了多个重要词根词缀的起源及其相关词汇,帮助读者更好地理解和记忆英语单词。 ... [详细]
author-avatar
陈翔_是学长
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有