ngScreening - angular 篩選器

CompileYouth 發(fā)布于2019-08-20 10:19 / 1844人閱讀

摘要：篩選器組件通過控制器定義數(shù)據(jù)，幫你完成數(shù)據(jù)的渲染監(jiān)聽過濾等功能。點(diǎn)擊按鈕會(huì)重置組件內(nèi)的數(shù)據(jù)。包括單選組多選組的選中狀態(tài)，原生的輸入值，的按鈕點(diǎn)擊后，會(huì)執(zhí)行這個(gè)函數(shù)當(dāng)然，如果你不需要的回調(diào)，這樣寫就可以了。

ngScreening v0.4.9

angular篩選器組件
通過控制器定義數(shù)據(jù)，screening幫你完成數(shù)據(jù)的渲染、監(jiān)聽、過濾等功能。

DEMO

http://moerj.github.io/ngScre...

Getting Started

npm install ng-screening

require("angular");//在使用前，你需要引入 angular

require("ngScreening");//引入組件

angular.module("yourProject",["ngScreening"]);//注冊(cè)組件

How to use

布局: 在html頁面上定義好容器

數(shù)據(jù)操作: 傳入數(shù)據(jù)，開啟監(jiān)聽

callback 響應(yīng)篩選數(shù)據(jù)變化

布局 ng-screening

篩選器的整體容器框



    ...





    ...

screening

定義一個(gè)篩選行

screening-checkbox

多選篩選器

screening-radio

單選篩選器

screening-div

自定義篩選容器

screening-flex

彈性容器布局，flex中的元素會(huì)均分screening行剩余部分

而當(dāng)screening中只有flex布局時(shí)，screening的label參數(shù)會(huì)被禁用

justify-content

screening-flex指令可以接收的參數(shù)，設(shè)置flex的均分方式，具體參數(shù)同css-flex

當(dāng)screening有混合布局時(shí)，默認(rèn)justify-content:center

screening-toggle

這個(gè)指令寫在組件外部的按鈕上，用來定義一個(gè)外部toggle按鈕

數(shù)據(jù)操作 data

傳入數(shù)據(jù)，自動(dòng)渲染，自動(dòng)綁定

app.controller("yourCtrl",function ($scope) {
    $scope.yourData = [
        {
            name:"香蕉"
        },
        {
            name:"菠蘿"
        },
        {
            name:"梨子"
        }
    ]
})

isChecked

defualt: undefined
設(shè)置數(shù)據(jù)，視圖上會(huì)響應(yīng)已選中的數(shù)據(jù)

app.controller("yourCtrl",function ($scope) {
    $scope.yourData = [
        {
            name:"香蕉",
            isChecked: true //視圖上香蕉將會(huì)選中
        },
        {
            name:"菠蘿"
        },
        {
            name:"梨子"
        }
    ]
})

isHidden

defualt: undefined
設(shè)置一個(gè)選擇項(xiàng)隱藏

app.controller("yourCtrl",function ($scope) {
    $scope.yourData = [
        {
            name:"香蕉",
            isHidden: true //視圖上香蕉將會(huì)隱藏
        },
        {
            name:"菠蘿"
        },
        {
            name:"梨子"
        }
    ]
})

監(jiān)聽 screening-event

default: "change"
監(jiān)聽dom元素事件，事件觸發(fā)時(shí)會(huì)執(zhí)行callback

screening-watch

監(jiān)聽數(shù)據(jù)模型，模型改變時(shí)會(huì)執(zhí)行callback

數(shù)據(jù)更新 callback

定義一個(gè)你的回調(diào)函數(shù)，它會(huì)在數(shù)據(jù)更新時(shí)通知你

...

app.controller("yourCtrl",function ($scope) {
    $scope.yourCallback = function () {
        // 每次數(shù)據(jù)更新會(huì)執(zhí)行這個(gè)函數(shù)
    }
})

serarch

定義搜索回調(diào)函數(shù)，界面會(huì)生成一個(gè)搜索按鈕

...

app.controller("yourCtrl",function ($scope) {
    $scope.yourSearch = function () {
        // 按鈕點(diǎn)擊后，會(huì)執(zhí)行這個(gè)函數(shù)
    }
})

reset

定義重置回調(diào)函數(shù)，界面會(huì)生成一個(gè)重置按鈕。
點(diǎn)擊按鈕會(huì)重置組件內(nèi)的數(shù)據(jù)。包括：單選組、多選組的選中狀態(tài)，原生dom的輸入值，screening-watch的ngModel

...

app.controller("yourCtrl",function ($scope) {
    $scope.yourReset = function () {
        // 按鈕點(diǎn)擊后，會(huì)執(zhí)行這個(gè)函數(shù)
    }
})

當(dāng)然，如果你不需要 reset 的回調(diào)，這樣寫就可以了。

...

API - 服務(wù) getChecked()

過濾掉未選擇的數(shù)據(jù)，返回一個(gè)新數(shù)據(jù)

// 別忘了依賴注入 ngScreening
app.controller("yourCtrl",function ($scope, ngScreening) {
    // 初始數(shù)據(jù)
    $scope.yourData = [
        {
            name:"香蕉",
            isChecked: true
        },
        {
            name:"菠蘿",
            isChecked: true
        },
        {
            name:"梨子"
        }
    ]
    // 每次數(shù)據(jù)更新會(huì)執(zhí)行這個(gè)函數(shù)
    $scope.yourCallback = function () {
        // 將選中的數(shù)據(jù)篩選出來，返回一個(gè)新的數(shù)據(jù)
        var newData = ngScreening.getChecked($scope.yourData);
        console.log(newData);
    }
})

resize()

重置screening尺寸，自動(dòng)顯示或隱藏伸縮按鈕

app.controller("yourCtrl",function ($scope, ngScreening) {
    // 重置頁面上所有screening容器
    ngScreening.resize()

    // 重置指定的screening容器，參數(shù)為DOM對(duì)象
    ngScreening.resize(DOM)

})

toggle()

展開或收起整個(gè)組件

app.controller("yourCtrl",function ($scope, ngScreening) {
    // 控制頁面上所有screening容器
    ngScreening.toggle()

    // 控制指定的screening容器，參數(shù)為DOM對(duì)象
    ngScreening.toggle(DOM)

})

OPTIONS 配置參數(shù) label

設(shè)置篩選行標(biāo)題

...

initrows

defualt: undefined
初始化顯示的 screening screening-checkbox screening-radio 的行數(shù)



    ... 1 ...
    ... 2 ...
    ... 3 ...
    ... 被隱藏 ... 




    
    
        
    




    ...

multi-name

default: checkbox-全選, radio-單選
全選的控制按鈕名稱

width

screening-div設(shè)置寬度

important

讓行常駐顯示，不受外框隱藏控制

class - 公共樣式

在 screening 行中的元素可以用的公共樣式如下

size-lg 大尺寸

size-md 中尺寸

size-sm 小尺寸

Support

IE 9+

angular 1.x

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80093.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CompileYouth

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 1748·2023-04-26 02:11
tensorflow使用

閱讀 3068·2023-04-25 16:18
【畢業(yè)設(shè)計(jì)】課程設(shè)計(jì)】【大作業(yè)】:流浪貓狗救助網(wǎng)站

閱讀 3772·2021-09-06 15:00
老生常談之CSS的垂直居中

閱讀 2712·2019-08-30 15:55
css垂直居中整理

閱讀 1996·2019-08-30 13:20
Java Script的方法

閱讀 2107·2019-08-26 18:36
微信小程序wepy框架資源匯總

閱讀 3200·2019-08-26 11:40
假如沒有登錄系統(tǒng)，怎么存儲(chǔ)用戶數(shù)據(jù)？

閱讀 2640·2019-08-26 10:11

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ngScreening - angular 篩選器

相關(guān)文章

**表格組件 GridManager Angular 1.x**

**SpreadJS 在 Angular2 中支持哪些事件？**

Angular 2.x 從0到1 (四）史上最簡單的Angular2教程

angular2高仿餓了么手機(jī)端app

**JSDuck 與 AngularJS 融合技巧**

發(fā)表評(píng)論

0條評(píng)論

CompileYouth

男|高級(jí)講師

TA的文章

tensorflow

tensorflow使用

【畢業(yè)設(shè)計(jì)】課程設(shè)計(jì)】【大作業(yè)】:流浪貓狗救助網(wǎng)站

老生常談之CSS的垂直居中

css垂直居中整理

Java Script的方法

微信小程序wepy框架資源匯總

假如沒有登錄系統(tǒng)，怎么存儲(chǔ)用戶數(shù)據(jù)？

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ngScreening - angular 篩選器

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！