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

レイアウト: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