- 1、下拉框监听事件
下拉框的监听事件只能执行一次,应把下拉框改变所执行的操作写在一个监听事件中。
- 2、下拉框渲染传过来的值
下拉框传过来的值,已经选中,但是没有显示,可以考虑用
$scope.$apply();
$timeout(function () {
layui.form.render();
}, 300);
- 3、layui-tab切换时,只显示当前tab的数据,清除其他tab页数据
// 第一个&第二个&第三个tab内容显示与否
$scope.tabShowObj = {
oneTab: true,
twoTab: false,
threeTab: false
};
// 第一个&第二个&第三个指令间参数传递的通道
$scope.commonParams = {
tabType: 'oneTab', // 标识是哪个tab页,用于权限表格查询条件
procDefUniqueId: $scope.rowData.procDefUniqueId // 流程定义id
};
var initLayuiTab = function () {
// 第二个&第三个指令进行监听 符合条件后执行初始化函数
layui.element.on('tab(attrSetFilter)', function (data) {
var id = $(data.elem.context).attr('id');
angular.forEach($scope.tabShowObj, function (value, index) {
$scope.tabShowObj[index] = false;
});
$scope.tabShowObj[id] = true;
$scope.commonParams.tabType = id;
$scope.$apply();
});
};
<div id="changeTab" class="def-layer-content">
<div class="layui-tab layui-tab-brief left w100pre" lay-filter="attrSetFilter">
<ul class="layui-tab-title">
<li class="layui-this" id="oneTab">第一个</li>
<li id="twoTab">第二个</li>
<li id="threeTab">第三个</li>
</ul>
<div class="layui-tab-content pl0px">
<div class="layui-tab-item layui-show">
<div one-directive common-params="commonParams" ng-if="tabShowObj.oneTab"></div>
</div>
<div class="layui-tab-item">
<div two-directive common-params="commonParams" ng-if="tabShowObj.twoTab"></div>
</div>
<div class="layui-tab-item">
<div three-directive common-params="commonParams" ng-if="tabShowObj.threeTab"></div>
</div>
</div>
</div>
</div>