Flask接口签名sign原理与实例代码浅析
279
2023-05-20
Angular实现一个简单的多选复选框的弹出框指令实例
之前的文章有写过包含树结构下拉框的。
要实现一个包含多个复选框的下拉框该如何做呢?
先上个效果图吧:
代码:
label {
display: block;
margin-top: 3px;
}
label.list:hover {
cursor: pointer;
background-color: red;
}
label.selected {
background-color: red;
}
angular.module("app", [])
.controller("ctrl", function($scope) {
jQuery(".dropdown-menu *").click(function(e){
e.stopPropagation();
});
$scope.selectList = [{
name: "选项1",
value: "item1",
select: false
}, {
name: "选项2",
value: "item2",
select: true
}];
$scope.$watch("selectList", function(n, o) {
$scope.result = (function(arr) {
var t = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].select) {
t.push(arr[i].name);
}
}
if (!t.length) {
t.push("--请选择--");
}
return t.join(",");
})($scope.selectList);
}, true)
})
.directive("multiSelect", function() {
return {
scope: {
data: "=multiSelect"
},
templateUrl: "option.html"
}
})
//下拉框数据绑定
指令模版代码option.html:
//为不同的选项定义不同的id
{{item.name}}
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~