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

单选框 见以下代码:

 <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)"

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值