NG筆記28-Checkbox清單進化版

很久以前就寫過Angular版的Checkbox清單,不過當時的版本有點簡陋,只能以字串陣列作為來源。我心目中的理想Checkbox清單元件,應該要像ng-options能用物件陣列當作資料來源,最好還可以切換單選模式(我知道改用Radio就能單選,但規格書不時出現註明要單選的Checkbox清單),沒找到前人寫好的現成作品,那就自己刻一個吧!
(「花更多時間去找元件」 vs 「把時間省下來自己寫一個」 常讓人左右為難,尤其當技難度不高,有時找輪子耗費的心力比造輪子還多!)

範例:

$scope.ObjItems = [
    { k: "A1", name: "Jeffrey" },
    { k: "A2", name: "Darkthread" },
    { k: "B1", name: "Hacker" }
];
$scope.StrArray = ["Jeffrey", "Darkthread", "Hacker"];
<div afet-cbx-list a-items="ObjItems" a-model="SelObjs" a-text-field="name"></div>
<div afet-cbx-list a-items="StrArray" a-model="SelString" a-exclusive="true"></div>

參數說明:

  • a-items 
    產生勾選方格清單的資料來源,可以是物件陣列或字串陣列。
  • a-model 
    要繫結選取結果的屬性,在多選模式其型別為物件或字串陣列,在單選模式則為物件或字串。
  • a-text-field 
    當資料來源為物件指定,需使用a-text-field決定以哪個屬性做為顯示在清單上的文字。
  • a-explusive 
    預設為多選模式,可透過a-exclusive="true"切換成單選模式。  

我做了Live Demo讓大家玩,完整程式碼已放上github,有需要者請自取。

[NG系列]

http://www.darkthread.net/kolab/labs/default.aspx?m=post&t=angularjs
歡迎推文分享:
Published 01 August 2016 07:35 AM 由 Jeffrey
Filed under:
Views: 5,137



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<August 2016>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication