ul-select

下拉框

1、ul-select使用小结

<div class="form-group col-lg-2">
    <label class="col-md-4 control-label label_font">按公司查询:</label>
    <div class="col-md-8">
        <ui-select sortable="true" ng-model="companySelect.selected"
                   theme="bootstrap" on-select="selecteCompanyFun($item, $model)">
            <ui-select-match placeholder="请选择公司">{{$select.selected.companyName}}</ui-select-match><!-- 文本框显示值 -->
            <ui-select-header>Bottom of the list.</ui-select-header>
            <ui-select-choices repeat="item in companyList track by $index"
            
                               refresh="refreshCompanyFun($select.search)" refresh-delay="0"
                               style="width:150%">
                <div class="select-option">
                    <span class="option-bind-html" ng-bind-html="item.companyName | highlight: $select.search"></span>
                </div>
            </ui-select-choices>
            <ui-select-no-choice class="padding-lr-10">
                没有查找到数据
            </ui-select-no-choice>
        </ui-select>
    </div>
</div>

$scope.companySelect={selected:{name:'请选择公司'}};  //类似于
$scope.companyList= [];
var companyId = ''
// 选择完值触发
$scope.selecteCompanyFun = function ($item) {
    companyId = $item.companyId
};
// 点击下拉框加载下拉框的文本值
$scope.refreshCompanyFun = function (key) {
    I.httpPost("generalStatistics/getCompany",null,{"name":key},function(res){
        $scope.companyList = res;
    });
}

说明·：

ng-model : 为下拉框的值，实现数据的双向绑定
<ui-select-match placeholder=“请选择公司”>{{$select.selected.companyName}}</ui-select-match> 文本框显示值
on-select 选择完值触发的事件
refresh 获取下拉框的文本值
repeat=“item in companyList track by $index”
ng-bind-html 文本框显示的值

2、select下拉框

<select class="form-control" style="padding: 3px 5px; height: 31px;" ng-model="searchObj.isAssigHx" ng-options="item.id as item.nameCn for item in projectTypeList" theme="bootstrap" style="width: 100%;margin-top: 6px;">
	<option value="" selected hidden>业务类型</option>
</select>