angularjs ng-repeat单选框和下拉框的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/scgyus/article/details/82658952

单选框 见以下代码：

 <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属性		扫描二维码关注公众号，回复： 5650389 查看本文章
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)"