angularjs – Angular ui-select.单独添加选项 – 重复选项
发布时间:2020-12-17 16:57:04 所属栏目:安全 来源:网络整理
导读:我需要在ui-select和另外一个自定义项目中显示选项数组.如何将此自定义项添加到当前指令?我无法在数组中插入此自定义项,因为有不同的UI用于显示此自定义项 解决方法 找到解决方案:将自定义指令添加到ui-select元素,该元素在项目列表的底部手动添加. 代码(
我需要在ui-select和另外一个自定义项目中显示选项数组.如何将此自定义项添加到当前指令?我无法在数组中插入此自定义项,因为有不同的UI用于显示此自定义项
解决方法
找到解决方案:将自定义指令添加到ui-select元素,该元素在项目列表的底部手动添加.
代码(它包含一些额外的属性和功能,而不是在主题中描述.我按原样发布): .directive('customOption',function($timeout){ return { restrict: 'A',link: function(scope,el,attrs){ var options = JSON.parse(attrs.customOption); var buttonText = options.buttonText; var func = options.click; var type = options.type; var condition = options.showIf; var template = "<div class='custom-option-container'><button type='button' class='btn btn-primary'><span class='glyphicon glyphicon-plus-sign'></span>" + buttonText + "</button></div>"; //if condition evaluated to true or no condition if(scope.$eval(condition) || !condition){ el.find('li.ui-select-choices-group').append(template); el.find('ul.ui-select-choices').removeAttr('ng-show'); //watch and //remove ng-hide class to display this custom item even if there are no more items scope.$watch(function(){ return el.find('ul.ui-select-choices').hasClass('ng-hide'); },function(newVal){ if(newVal){ $timeout(function() { el.find('ul.ui-select-choices').removeClass('ng-hide'); }); } }); el.find('div.custom-option-container button').bind('click',function(){ scope[func].apply(null,[type]); }) }; } }; }) HTML: <ui-select ng-model="asset.category" custom-option='{"buttonText": "Add New Category","click" : "showAddModal","type": "category"}'> <ui-select-match>{{ $select.selected.categoryName }} </ui-select-match> <ui-select-choices repeat="category in categories | filter: $select.search"> <span ng-bind-html="category.categoryName | highlight: $select.search"></span> </ui-select-choices> </ui-select> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- akka设计模式系列-Chain模式
- AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
- scala – 使用无形状通过HList将Future的元组转换为元组的F
- bash – 在特定目录中运行`ng build`
- angular – 在Laravel中导入Excel Sheet并在UI中显示提取的
- macos – ./sysroot.sh:不允许操作
- 如何诊断和调优,才能轻松与数据库“timeout”说再见?
- axis2 发布 webservice 和 java调用webservice
- 角度 – Ionic3与woocommerce休息api有帖子请求?
- 窥视Scala Actor的邮箱的最佳方法