ngScreening - angular 篩選器

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

篩選器的總體容器框

<!-- 建立一個篩選器的外殼 -->
<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-content

screening-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:'梨子'
        }
    ]
})

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

定義重置回調函數，界面會生成一個重置按鈕。
點擊按鈕會重置組件內的數據。包括：單選組、多選組的選中狀態，原生dom的輸入值，screening-watch的ngModel

<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:'菠蘿',
            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

設置篩選行標題

<screening label="標題:">
    ...
</screening>

initrows

defualt: undefined
初始化顯示的 screening screening-checkbox screening-radio 的行數

<!-- 默認顯示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-name

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

<!-- 控制按鈕點擊後能夠所有選中或反選 -->
<screening-checkbox multi-name="全選"></screening-checkbox>

<!-- 單選的只有樣式沒有實際功能 -->
<screening-radio multi-name="單選"></screening-radio>

width

screening-div設置寬度

<!-- 設置容器爲500像素 -->
<screening-div width="500px"></screening-div>

important

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

<screening important>
</screening>

class - 公共樣式

在 screening 行中的元素能夠用的公共樣式以下

• size-lg 大尺寸

• size-md 中尺寸

• size-sm 小尺寸

Support

• IE 9+

• angular 1.x