一、单选框与复选框在点击事件发生时的区别
1、单选框在点击后:呈现选中状态,把ng-value赋值给ng-model(初始化时,如果两者都有默认值,相等则选中);
2、复选框在点击后:呈现相反状态,把ng-checked赋值给ng-model(初始化时,如果两者都有默认值,那么前者将覆盖后者);
二、下拉框
例一:反常用法(select和option都由后台决定)
front==='管理员'?解决sendBackValue初始化值;
在option被点击后,系统把ng-value的值赋值给sendBackValue;
ng-bind只负责前端展示。
例二:常规用法(select和option都由前端决定)
select的初始状态
如果$scope.myLog.resultDo===$scope.resultDo[index].back,
那么select的初始状态为:$scope.resultDo[index].front。
$scope.myLog={resultDo:"全部后台"};
$scope.resultDo = [{ back: '全部后台', front: '全部前端' },{ back: '已读后台', front: '已读前端' },{ back: '未读后台', front: '未读前端' }];
例三:变态用法(select由后台决定,option由前端决定)
三、angular1单选框、复选框、下拉框三者联合案例展示
四、下拉表格
1、html
2、css
.table{
margin: 10px 0;
}
.table table{
width:100%;
}
.table table tr td {
text-align: center;
border:1px solid #dee2e6;
border-collapse: collapse;
height:40px;
}
.table table tr td.index {
width:10%;
}
.table table tr td.beginTime {
width:25%;
}
.table table tr td.ipAddress {
width:25%;
}
.table table tr td.port {
width:15%;
}
.table table tr td.protocolName {
width:15%;
}
.table table tr td.detail {
width:10%;
}
3、js
$scope.id="";
$scope.imgClick=function (id) {
if($scope.id===id){
$scope.id="";
return;
}
$scope.id=id;
};
4、效果图
![图片描述](attimg://article/content/picture/201810/31/092509x0q66m95oc56s0mb.png)
附:时间option
$scope.studyTimeOptions=[
{ back: '60', front: '1分钟' },
{ back: '180', front: '3分钟' },
{ back: '300', front: '5分钟' },
{ back: '600', front: '10分钟' },
{ back: '900', front: '15分钟' },
{ back: '1200', front: '20分钟' },
{ back: '1800', front: '30分钟' },
{ back: '3600', front: '1小时' },
{ back: '7200', front: '2小时' },
{ back: '14400', front: '4小时' },
{ back: '28800', front: '8小时' },
{ back: '43200', front: '12小时' },
{ back: '86400', front: '1天' },
{ back: '259200', front: '3天' },
{ back: '604800', front: '1周' },
{ back: '1209600', front: '2周' },
{ back: '2592000', front: '1个月' }
];