成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ngScreening - angular 篩選器

CompileYouth / 1804人閱讀

摘要：篩選器組件通過控制器定義數(shù)據(jù)，幫你完成數(shù)據(jù)的渲染監(jiān)聽過濾等功能。點擊按鈕會重置組件內(nèi)的數(shù)據(jù)。包括單選組多選組的選中狀態(tài)，原生的輸入值，的按鈕點擊后，會執(zhí)行這個函數(shù)當然，如果你不需要的回調(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"]);//注冊組件
How to use

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

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

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

布局 ng-screening

篩選器的整體容器框



    ...






    ...
screening

定義一個篩選行
screening-checkbox

多選篩選器
screening-radio

單選篩選器
screening-div

自定義篩選容器
screening-flex

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

而當screening中只有flex布局時，screening的label參數(shù)會被禁用

justify-content

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

當screening有混合布局時，默認justify-content:center
screening-toggle

這個指令寫在組件外部的按鈕上，用來定義一個外部toggle按鈕
數(shù)據(jù)操作 data

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

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

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

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

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

app.controller("yourCtrl",function ($scope) {
    $scope.yourData = [
        {
            name:"香蕉",
            isHidden: true //視圖上香蕉將會隱藏
        },
        {
            name:"菠蘿"
        },
        {
            name:"梨子"
        }
    ]
})
監(jiān)聽 screening-event

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

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

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



    ...

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

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


    ...

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

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


    ...

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

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


    ...
API - 服務(wù) getChecked()

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

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

重置screening尺寸，自動顯示或隱藏伸縮按鈕

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

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

})
toggle()

展開或收起整個組件

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

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

})
OPTIONS 配置參數(shù) label

設(shè)置篩選行標題


    ...
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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80093.html

相關(guān)文章

  • 表格組件 GridManager Angular 1.x

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

    darcrand 評論0 收藏0

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

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

    姘擱『 評論0 收藏0

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

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

    sanyang 評論0 收藏0

  • angular2高仿餓了么手機端app

    摘要：項目地址郵箱求工作杭州項目介紹來公司實習(xí)，由于技術(shù)棧原因，學(xué)習(xí)一下，以此項目來做練習(xí)。項目暫時只能在開發(fā)環(huán)境運行。 項目地址 https://github.com/Gitjinfeiy... 郵箱 [email protected]（求工作 杭州） 項目介紹 來公司實習(xí)，由于技術(shù)棧原因，學(xué)習(xí)一下angular2，以此項目來做練習(xí)。 項目暫時只能在開發(fā)環(huán)境運行。...

    OldPanda 評論0 收藏0

  • JSDuck 與 AngularJS 融合技巧

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

    CarterLi 評論0 收藏0

發(fā)表評論

0條評論

CompileYouth

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<