单选框 见以下代码:
<div class="form-group " >
<label class="col-sm-2 control-label">看板类型</label>{{useOrgSelect}}
<div class="col-sm-10">
<label ng-repeat="item in screenTypeList" style="margin-right: 20px" >
<input type="radio" name="demo" value="{{item.value}}" ng-model="model.screenType" ng-disabled="model.id">{{item.name}}
</label>
</div>
<p ng-if="!model.isShow" class="form-control-static">{{model.boardName}}</p>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<img style="width:70px;height: 40px" src="assets/images/screen/12.png">
<img style="width:70px;height: 40px" src="assets/images/screen/9.png">
<img style="width:70px;height: 40px" src="assets/images/screen/4.png">
</div>
</div>
默认选中问题需要value的值与model中的值相同,即可实现选中
下拉框的实现:
<div class="form-group " >
<label class="col-sm-2 control-label">看板类型</label>{{useOrgSelect}}
<ui-select class="col-sm-10" ng-model="model.screenType" search-enabled="false" ng-disabled="model.id" theme="bootstrap" ng-change="changeQueryType()" required >
<ui-select-match placeholder="看板类型">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item.value as item in screenTypeList | filter: $select.search">
<div ng-bind-html="item.name"></div>
</ui-select-choices>
</ui-select>
</div>
ui-select相关属性
选项 | 描述 | 值 | 默认值 |
multiple | 多选,直接加上multiple属性 |
|
|
close-on-select | 在多选情况下,选中一项,就关闭下拉项 | boolean | true |
append-to-body | 在多选情况下,选中项追加显示 | boolean | false |
ng-disabled | 控件被禁用 | boolean | true |
ng-model | 控件绑定对象 | String,number,array | undefined |
search-enabled | 搜索功能 | boolean | true |
reset-search-input | 选中一项后清楚搜索数据 | boolean | true |
theme | 主题,有’bootstrap’、 ’select’、’select2’ | String | bootstrap’ |
autofocus | 加载时自动获得焦点 | boolean | true |
focus-on | 定义一个监听事件的名字(e.g. focus-on='SomeEventName') | String | undefined |
limit | 限制多选择模式选择的项目数 | integer | undefined |
事件
事件名 | 描述 | 例子 |
on-remove | 当项被删除时发生 | on-remove="someFunction($item, $model)" |
on-select | 当项被选中时发生 | on-select="someFunction($item, $model)" |