ngScreening - angular 篩選器

CompileYouth 發布于2019-08-20 10:19 / 1771人閱讀

摘要：篩選器組件通過控制器定義數據，幫你完成數據的渲染監聽過濾等功能。點擊按鈕會重置組件內的數據。包括單選組多選組的選中狀態，原生的輸入值，的按鈕點擊后，會執行這個函數當然，如果你不需要的回調，這樣寫就可以了。

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

IE 9+

angular 1.x

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80093.html

表格組件 GridManager Angular 1.x

摘要：非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。前端雞湯前端框架前端相關篩選選中項，字符串默認為。非必設項，選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封裝, 用于便捷的在 Angular 中使用GridManager. s...

darcrand 2019-08-23 16:46 評論0 收藏0
SpreadJS 在 Angular2 中支持哪些事件？

摘要：在上一篇文章中，我們學習了在中支持綁定的屬性，今天我們來介紹在中支持哪些事件。詳細的事件說明，請參考博客。版本即將發布，更多更好的功能盡在新版本中，敬請期待登錄官網，了解更多。 showImg(https://segmentfault.com/img/bVP1Wc?w=900&h=500);SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網格功能...

姘擱『 2019-08-20 17:47 評論0 收藏0
Angular 2.x 從0到1 (四）史上最簡單的Angular2教程

摘要：而且此時我們注意到其實沒有任何一個地方目前還需引用了，這就是說我們可以安全地把從組件中的修飾符中刪除了。第一節：Angular 2.0 從0到1 （一）第二節：Angular 2.0 從0到1 （二）第三節：Angular 2.0 從0到1 （三）作者：王芃 wpcfan@gmail.com 第四節：進化！模塊化你的應用一個復雜組件的分拆上一節的末尾我偷懶的甩出了大量代碼，可能...

sanyang 2019-08-20 14:39 評論0 收藏0
angular2高仿餓了么手機端app

摘要：項目地址郵箱求工作杭州項目介紹來公司實習，由于技術棧原因，學習一下，以此項目來做練習。項目暫時只能在開發環境運行。項目地址 https://github.com/Gitjinfeiy... 郵箱 1912144808@qq.com（求工作杭州）項目介紹來公司實習，由于技術棧原因，學習一下angular2，以此項目來做練習。項目暫時只能在開發環境運行。...

OldPanda 2019-08-22 11:03 評論0 收藏0
JSDuck 與 AngularJS 融合技巧

摘要：融合思路解決這個問題，有兩種思路。給我們帶來了以下新成員模塊服務指令篩選器和控制器。與其他類是通過類的名稱區分的，名稱統一以結尾。這種處理方式是一種折中方案，如果想要更加規范優雅的話，建議使用自定義標簽來解決。字數：1568 閱讀時間：10分鐘前言 ??前面，我們以一個實戰案例來詳細說明了如何在實際開發中使用JSDuck工具。但是，并不是所有的時候，代碼的封裝方式都受我們控制的。...

CarterLi 2019-08-21 18:41 評論0 收藏0