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>
```
上一篇下一篇

猜你喜欢

热点阅读