21angular1单选框、复选框、下拉框、下拉表格

一、单选框与复选框在点击事件发生时的区别
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
序号 开始时间 IP地址 端口 协议名称 详情
{ {$index+1}} 详情
详情
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个月' }
];

  



转载于:https://www.cnblogs.com/gushixianqiancheng/p/10965981.html

你可能感兴趣的:(javascript)