單選框 · ng-form

# 單選框在一組備選項中進行單選。 radio單選框除了基礎配置以外，主要的配置包含兩大類：屬性配置和數據配置。 ![radio1](https://img.kancloud.cn/bb/73/bb73d3d488429eeec8d75adcddcb2a28_2358x1415.png "radio1.png") ## 1、屬性配置屬性配置中包含了組件當前顯示的外觀及功能。當前主要包含： * 輸入提示 * 是否隱藏 * 是否禁用 ## 2、數據配置數據配置標示了當前下拉選擇器所能展示的數據。當前支持靜態數據、API接口、數據字典（需提前配置）三種輸入格式的接入。 ### 靜態數據靜態數據配置直接在節目上填寫即可。 ![radio2](https://img.kancloud.cn/d5/d5/d5d574c4cd8647a3ac8cbfcc8930810b_2325x1408.png "radio2.png") ### API接口 API接口通過axios請求獲取后端的接口數據后進行加載展示。示例(僅模板)： ``` { "list": [ { "type": "radio", "options": { "defaultValue": "", "placeholder": "請輸入", "dynamic": 1, "options": [ { "value": "1", "label": "選項1" }, { "value": "2", "label": "選項2" } ], "remoteFunc": "https://netopt.net/api/bbs/api/hotUser", "dataPath": "data", "remoteValue": "userId", "remoteLabel": "username", "dictType": "", "hidden": false, "disabled": false, "linkage": false, "linkData": [] }, "label": "單選框", "labelWidth": -1, "width": "100%", "span": 24, "model": "radio_1679580924374", "key": "radio_1679580924374", "rules": [ { "required": false, "message": "必填項", "trigger": [ "blur" ] } ] } ], "config": { "labelPosition": "left", "labelWidth": 100, "size": "mini", "outputHidden": true, "hideRequiredMark": false, "syncLabelRequired": false, "customStyle": "" } } ``` ![radio3](https://img.kancloud.cn/f2/99/f2998a2405028864468cb3bc22d368f4_2313x1313.png "radio3.png") ***** **配置說明** **遠端方法**：遠程請求的接口地址。目前僅支持get請求。 **列表數據dataPath** 遠程請求后數據很多時候并不直接就是數組，在返回的數據結構中在某個路徑下才是我們需要的數據。此處的解析依賴object-path。舉例1: ``` 假設當前的數據返回結構為 { "msg":"操作成功", "code":0, "data":[ {"id": 1 , "name": "張三"}, {"id": 2 , "name": "李四"} ] } 則此時的dataPath 應該填寫為: data ``` 舉例2: ``` { "msg":"操作成功", "code":0, "data":{ list: [ {"id": 1 , "name": "張三"}, {"id": 2 , "name": "李四"} ], pageIndex: 1, pageSize: 2, totalCount: 78 } } 則此時的dataPath 應該填寫為: data.list ``` **值字段** 通過dataPath解析出來的數組單個值中標記value的字段。 **標簽字段** 通過dataPath解析出來的數組單個值中用來顯示的字段。 ### 數據字典數據字典需要提前配置。 ![radio4](https://img.kancloud.cn/ef/89/ef890e3528138b8a612599c736ec7064_2309x1124.png "radio4.png")