typeahead-pro指令:
按照输入匹配相应的项,显示在下拉列表中
使用方法:
1,引入angular.virgo.js
<script src="#{cdnPath}/virgo/2.0.1/js/angular.virgo.js" ></script>
2,写标签
<typeahead-pro width="120" input-class="'form-control'" style="display: inline-block" key-model="vm.bucketCode" th="thBucketCode"/>
3,配置属性
$scope.thBucketCode = {
title: 'bucketName', //title-model对应的字段
key: 'bucketCode', //key-model对应的字段
prompt: 'Bucket代码', //placeholder
hidebutton: true,
services: ossService,
method: "queryBucket", //默认query
cache: true, //是否使用缓存,如果不使用,将一次性取出全部数据,如果使用,将在每次输入后到后台查询
display: 'key', //显示在文本框中的字段
getOptions: function () {
//查询条件
//return { rows: 100};
},
selectItem: function (item) {
//选择完成后触发
//$scope.query();
}
};
select-from-list指令:
一个文本框加按钮的组合,点击显示弹窗,弹窗中显示一个列表,提供可选择的项,选择完毕后点击确定可将需要的内容回填至文本框中。
使用方法:
1,引入angular.virgo.js
<script src="#{cdnPath}/virgo/2.0.1/js/angular.virgo.js" ></script>
2,写标签
<!--默认size20-->
<select-from-list ng-model="vm.bucketCode" btn-class="'btn-sm'" input-class="'form-control input-sm'" size="16" sfl-config="sflBucketCode" />
3,配置属性
$scope.sflBucketCode = {
services: ossService,
method: "queryBucket", //默认method:query
datafield: [{ text: 'Bucket代码', field: 'bucketCode' }, { text: 'Bucket名称', field: 'bucketName' }],//数据字段
searchfield: [{ text: 'Bucket名称', field: 'bucketName' }],//查询字段
field: 'bucketCode', //返回值是哪个字段
//multi: true, //是否允许多选,默认单选
//rows:10, //列表每页行数,默认10行
title: '选择Bucket', //dialog标题
//btntext:'选择', //按钮文字
getOptions: function () {
return {
code_type:'T514'
};
},
selectItem: function (item) {
//item返回选择的数据
//vm.bucketCode = item[0].bucketCode;
$scope.query();
// console.log(item[0].bucketCode)
}
};