angualr的radio/checkbox
2016-08-21 本文已影响33人
Look_a_Look
<input type="checkbox" ng-model="layer.selected" ng-change="toogleLayer()">
<input type="radio" value='{{layer.id}}' ng-model="layerGroup.selectedId" name="{{layerGroup.id}}" ng-change="toogleLayer()">
checkBox复选框通过设置ng-true-value='yes'或者ng-false-value='no'来设置选中时的值(即ng-model),默认是ture和false。ng-model的值为ng-true/false-value对应的值
注意,此如果明确指定ng-true-value='true',则选中时候的值(即ng-model)是字符串的'true',不是bool的true
radio单选框,通过指定value的值与no-model的值相同来设置选中状态,当二者相等时,该radio被选中;如果多个radio为一组,则要设置相同的name,相同的ng-model ,ng-model的值为选中的那个radio的value
此外ng-checked="expression" 当expression返回true时,也能选中checkbox和radio
示例数据:
[{
"id": "layerGroupNo0",
"name": "基础底图",
"type": "baseMap",
"selectedMode": "single",
"selectedId": "vectorBaseMap",
"layers": [{
"id": "vectorBaseMap",
"name": "矢量底图",
"url": "http://192.168.110.218:6080/arcgis/rest/services/CQVector/MapServer"
}, {
"id": "imageBaseMap",
"name": "影像底图",
"url": "http://192.168.110.218:6080/arcgis/rest/services/CQImage/MapServer"
}, {
"id": "vectoryBaseMap",
"name": "晕眩底图",
"url": "http://www.digitalcq.com/RemoteRest/services/CQMap_DEM/MapServer"
}]
}, {
"id": "layerGroupNo1",
"name": "专题图",
"type": "bizMap",
"selectedMode": "multiple",
"selected": false,
"layers": [{
"id": "layerGroupNo1-item1",
"name": "layerGroupNo1-item1",
"selected": true,
"url": "http://192.168.110.218:6080/arcgis/rest/services/CQboundary/MapServer/0"
}, {
"id": "layerGroupNo1-item2",
"name": "layerGroupNo1-item2",
"selected": false,
"url": "http://192.168.110.218:6080/arcgis/rest/services/CQboundary/MapServer/1"
}, {
"id": "layerGroupNo1-item3",
"name": "layerGroupNo1-item3",
"selected": false,
"url": "http://192.168.110.218:6080/arcgis/rest/services/CQboundary/MapServer/2"
}]
}]
单选框:
<div ng-repeat="layer in layerGroup[0].layers">
<input type="radio" value="vectorBaseMap" ng-model="layerGroup.selectedId" name="layerGroupNo0" ng-change="toogleLayer()"> 矢量底图
<input type="radio" value="imageBaseMap" ng-model="layerGroup.selectedId" name="layerGroupNo0" ng-change="toogleLayer()"> 影像底图
<input type="radio" value="vectoryBaseMap" ng-model="layerGroup.selectedId" name="layerGroupNo0" ng-change="toogleLayer()"> 晕眩底图
</div>
复选框:
<div ng-repeat="layer in layerGroup[1].layers">
<input type="checkbox" ng-model="layer.selected" ng-change="toogleLayer()">layerGroupNo1-item1
<input type="checkbox" ng-model="layer.selected" ng-change="toogleLayer()">layerGroupNo1-item2
<input type="checkbox" ng-model="layer.selected" ng-change="toogleLayer()">layerGroupNo1-item3
</div>
```